Async Clipboard API 的 SVG 支援

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Async Clipboard API 的 Clipboard 介面可提供系統剪貼簿內容的讀寫權限。網頁應用程式可藉此實作剪下、複製和貼上功能。您可以呼叫 read() 方法，將資料從剪貼簿貼到應用程式，也可以呼叫 write() 方法，將資料複製到剪貼簿。除了文字、可攜式網路圖形 (PNG) 格式的圖片、經過清理和未經清理的 HTML，以及網頁自訂格式，Async Clipboard API 現在也支援複製及貼上 SVG 圖片，這表示您終於可以更自然地與處理 SVG 的圖片編輯軟體互動，方法是將 SVG 圖片複製及貼上為圖片，而不是文字，或使用變通方法。

偵測 SVG 支援功能

呼叫靜態 ClipboardItem.supports() 方法，並傳遞所需的 MIME 類型，即可偵測 SVG 圖片 (和任何其他 MIME 類型) 的支援情形。

const supportsSVG = () => {
  if (
    !('supports' in window.ClipboardItem) ||
    !window.ClipboardItem.supports('image/svg+xml')
  ) {
    return false;
  }
  return true;
};

複製 SVG 圖片

如要複製 SVG 圖片，請使用物件填入 ClipboardItem。含有 SVG 圖片資料的 Blob 是值，而 Blob 的類型 (在本例中為 'image/svg+xml') 則是鍵。

copyButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  try {
    const blob = await fetch(img.src).then((response) => response.blob());
    await navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
    alert(err.message);
  }
});

貼上 SVG 圖片

如要貼上 SVG 圖片，請從剪貼簿讀取 ClipboardItem，然後使用 getType() 方法取得所需型別 (也就是本例中的 'image/svg+xml')。這會傳回 Blob，轉換為 Blob 網址後，即可指派給 <img> 的 src 屬性。

pasteButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  const [clipboardItem] = await navigator.clipboard.read();
  const svgBlob = await clipboardItem.getType('image/svg+xml');
  if (!svgBlob) {
    alert('No SVG in the clipboard.');
    return;
  }
  const image = document.createElement('img');
  const blobURL = URL.createObjectURL(svgBlob);
  image.addEventListener('load', () => {
    URL.revokeObjectURL(blobURL);
  });
  image.src = blobURL;
});

清除

SVG 是一種功能強大的格式，例如允許內嵌指令碼。如果使用者貼上來源不明的內容，可能會造成危險，因此瀏覽器會執行清除步驟。複製資料時，Async Clipboard API 會產生格式正確的 SVG 文件，然後寫入剪貼簿。貼上資料時，片段剖析器會產生經過嚴格處理的 SVG 片段。因此，在貼上作業之前，onclick 事件處理常式屬性仍存在，但貼上後就會移除。

macOS 上的「剪貼簿檢視器」應用程式正在檢查剪貼簿內容。這表示 SVG 中的 onclick 事件監聽器屬性仍然存在。
macOS 上的「剪貼簿檢視器」應用程式正在檢查剪貼簿內容。這表示 SVG 中的 onclick 事件監聽器屬性仍然存在。

示範

請參閱示範，瞭解如何複製及貼上 SVG。查看原始碼，瞭解運作方式。請務必在複製及貼上前後，嘗試點選任一圓圈。貼上後，系統會移除可能危險的 onclick 事件處理常式屬性。

特別銘謝

Chromium 的非同步剪貼簿 API 支援 SVG，是由 Microsoft Edge 團隊實作。本文由 Rachel Andrew 和 Anupam Snigdha 審查。