对 Async Clipboard API 的 SVG 支持

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Async Clipboard API 的 Clipboard 接口提供对系统剪贴板内容的读写权限。这让 Web 应用能够实现剪切、复制和粘贴功能。您可以通过调用 read() 方法将数据从剪贴板粘贴到应用中，并通过调用 write() 方法将数据复制到剪贴板中。除了文本、可移植网络图形 (PNG) 格式的图片、经过清理和未经清理的 HTML 以及 Web 自定义格式之外，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 图像

通过使用对象填充 ClipboardItem 来复制 SVG 图片。包含 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 在转换为 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 中针对 Async Clipboard API 的 SVG 支持由 Microsoft Edge 团队实现。此博文由 Rachel Andrew 和 Anupam Snigdha 审核。