Async Clipboard API 的 SVG 支援

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Clipboard 介面 Async Clipboard API 提供讀取和寫入權限， 系統剪貼簿。如此一來，網頁應用程式 貼上功能。你可以透過以下方式，將剪貼簿中的資料貼到應用程式 呼叫 read() 方法， 然後呼叫 write() 方法。 除了 text 以外， 可攜式網路中的 圖片 圖形 (PNG) 格式、經過處理和 未經處理的 HTML，以及 網頁自訂格式， Async Clipboard API 現在也支援複製及貼上 SVG 圖片， 代表你終於能與處理 SVG 的圖片編輯軟體互動 做法是複製及貼上 SVG 圖片做為圖片，而不是做為文字或 運用駭客工作。

支援 SVG 的功能偵測

呼叫 靜態的 ClipboardItem.supports() 方法，傳遞所需的 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，然後 取得所需的類型 (在本範例中為 'image/svg+xml') getType() 方法。這會傳回一個 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 上的 Clipboard Viewer 應用程式檢查剪貼簿內容。代表 也就是 SVG 中的 click 事件監聽器屬性仍然存在。
macOS 上的 Clipboard Viewer 應用程式檢查剪貼簿內容。代表 請注意，可擴充向量圖形中的 click 事件監聽器屬性仍然存在。

示範

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

特別銘謝

由 Microsoft Edge 團隊。這則貼文是由 Rachel Andrew 和 Anupam Snigdha 審核。