處理、操作剪貼簿的那些事

剪貼簿

在瀏覽網頁或是工作的時候，應該常常會用到兩大神鍵 Ctrl+C、Ctrl+V 來搬運各式各樣的資訊，同時也經常會在各大論壇、部落格文章或是社群媒體看到分享連結的功能，今天就來談談關於那些剪貼簿的實用技法~

一鍵複製文字

首先要看到的是常見的點擊複製的功能，在處理的邏輯上其實並不複雜，這邊使用到的是 Clipdboard API ，是一組較新的剪貼簿操作方法，且語法相對簡單，可以快速地呼叫和剪貼簿互動的 function。

這邊我們引用 writeText() 這個函式來製作功能，例如：

const copyText = (text: string) => {
  try {
    navigator.clipboard.writeText(text)
    // 複製成功後的行為 ( 跳出提示、關閉視窗等 )
  } catch (err) {
    // 處理錯誤
  }
}

後續再將 function 綁定到指定的按鈕即可~

存取剪貼簿的內容

以上述提到的 Clipboard API 來說，可以使用 readText() 這個非同步函式來讀取剪貼簿內的文字內容。

不過筆者在製作這個部落格時，因為從使用 HackMD 的過程中發現到可以透過貼上圖片一次完成圖片上傳這個相當方便的 feature，因此也嘗試復刻了這個功能，處理的邏輯大致上可以用下圖呈現：

這邊主要聚焦在前面讀取剪貼簿圖片部分，會使用到 ClipboardEvent 來獲取複製的圖片內容，例如：

const handlePasteImage = async (
  e: React.ClipboardEvent<HTMLTextAreaElement>
) => {
  // 從 ClipboardEvent 中呼叫 clipboardData 獲取物件
  const items = e.clipboardData.items;
  // 欲捕捉的圖片檔案
  let file: File | null = null;

  // 迴圈檢查剪貼簿裡的內容，
  // 第一個圖片類型檔案即為最新複製的圖片
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.startsWith("image/")) {
      file = items[i].getAsFile();
      break;
    }
  }

  // 後續處理...
}

如此ㄧ來就可以捕捉到剪貼簿裡的圖片，以便進行後續的上傳作業~