前言

最近有人跟我抱怨之前上傳到免費相簿空間 Upload.cc 的圖片連結失效了。

她的需求是：

  • 需要永久連結來發噗（Plurk）。

  • 在 iPad Pro 上直接完成圖片上傳作業。

  • 預覽、管理已上傳的圖片，最好能方便地備份到本地端。

  • 檔案不大，通常是單個檔案上傳，有時候會需要批次上傳。

當然可以架個伺服器，寫個 iPadOS App 實現，不過時間成本太高，等有空再說吧。

除此之外，第一個想到的雲端空間是 Google Drive，但實測後發現其分享連結不適合發噗。

後來想到 Github 好像還不錯，既能使用瀏覽器上傳，批次作業用電腦 push，備份直接 pull。

使用 Github 方案需要解決的問題是：

  • 如何於 iPad Pro 上上傳單個檔案並獲取分享連結？

  • 如何於 iPad Pro 上預覽圖片縮圖並獲取分享連結？

很簡單，使用 JS 書籤即可實現。

實作過程

在 Upload 頁面，取得上傳檔案的檔名，跟網址結合之後做點處理就是分享連結了。

使用setTimeout延後點擊上傳按鈕，否則剪貼簿的操作會出現Document is not focused.的錯誤。

javascript:
var copy_filename;
for (filename of document.querySelectorAll("div.js-filename")) { if(filename.innerHTML) { copy_filename = filename.innerHTML; break; } }
navigator.clipboard.writeText("https://raw.githubusercontent.com"+window.location.pathname.replace("/upload","")+"/"+copy_filename);
setTimeout(function() {
alert("連結已拷貝至剪貼簿 "+ copy_filename);
alert("請等待上傳頁面重整完畢！！");
document.querySelector("#repo-content-pjax-container > div > form > button").click();}, 100);

在 List 頁面，添加<a>標籤於每個圖檔後面，設定另開分頁、連結、背景。

使用<a>標籤的背景而不是用<img>，是為了解決 Safari 在拷貝連結時會順便拷貝圖片的問題。

javascript:
for (link of document.querySelectorAll(".js-navigation-open.Link--primary")){
var url = link.href.replace("github","raw.githubusercontent").replace("/blob","");
var a = document.createElement("a");
a.setAttribute("target","_blank");
a.setAttribute("href",url);
a.setAttribute("style", "background: url('"+url+"') center; background-size: cover; width: 100px; height: 100px;");
link.parentElement.parentElement.parentElement.appendChild(a);
}