button.addEventListener("click", () => setClipboard("<empty clipboard>"));

async function setClipboard(text) {
  const type = "text/plain";
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];
  await navigator.clipboard.write(data);
}

setClipboard() 方法首先创建一个新的 Blob 对象。此对象是构建发送到剪贴板的 ClipboardItem 对象所必需的。Blob 构造函数接收我们想要复制的内容及其类型。此 Blob 对象可以来自许多来源；例如，画布。

接下来，我们创建一个新的 ClipboardItem 对象，将 blob 放入其中以发送到剪贴板。传递给 ClipboardItem 构造函数的对象的键指示内容类型，值指示内容。然后使用 await 调用 write()。可以使用 try..catch 块捕获写入数据的任何错误。

将画布内容写入剪贴板

此示例在画布上绘制一个蓝色矩形。您可以单击矩形以将画布内容作为图像复制到剪贴板，然后选择另一个元素并将剪贴板中的内容粘贴到其中。

HTML

HTML 仅定义了我们的 <canvas> 元素和 id 为 target 的 <div> 元素，画布图像将粘贴到其中。

html

<canvas id="canvas" width="100" height="100"></canvas>

<div id="target">Paste here.</div>

<pre id="log"></pre>

#log {
  height: 60px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

首先，我们定义一个 async 函数以将画布复制到 blob 中。这将旧的回调样式 HTMLCanvasElement.toBlob() 方法包装到更直观的基于 Promise 的函数中。

// Async/await method replacing toBlob() callback
async function getBlobFromCanvas(canvas) {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) {
        resolve(blob);
      } else {
        reject(new Error("Canvas toBlob failed"));
      }
    });
  });
}

接下来，我们设置画布并为 click 事件添加事件侦听器。

当您单击蓝色矩形时，代码首先检查剪贴板是否支持类型为 "image/png" 的数据。如果是，则将显示矩形的画布复制到 blob 中，然后将 blob 添加到 ClipboardItem，然后写入剪贴板。

const canvas = document.getElementById("canvas");

// Set up canvas
const ctx = canvas.getContext("2d");
ctx.fillStyle = "cornflowerblue";
ctx.fillRect(0, 0, 100, 100);

canvas.addEventListener("click", copyCanvasContentsToClipboard);
const target = document.getElementById("target");

async function copyCanvasContentsToClipboard() {
  if (ClipboardItem.supports("image/png")) {
    // Copy canvas to blob
    try {
      const blob = await getBlobFromCanvas(canvas);
      // Create ClipboardItem with blob and it's type, and add to an array
      const data = [new ClipboardItem({ [blob.type]: blob })];
      // Write the data to the clipboard
      await navigator.clipboard.write(data);
      log("Copied");
    } catch (error) {
      log(error);
    }
  } else {
    log("image/png is not supported");
  }
}

请注意，对 PNG 文件的剪贴板支持是规范的强制部分，因此我们实际上不需要使用 ClipboardItem.supports() 在上面进行检查（它始终返回 true）。在我们要获取可选文件类型或我们事先不知道类型的资源的情况下，该检查将更有用。

然后，我们为我们要在其中显示剪贴板内容作为图像的元素上的 paste 事件定义一个事件侦听器。FileReader API 允许我们使用 readAsDataUrl 方法读取 blob，并使用画布内容创建 <img> 元素。

target.addEventListener("paste", (event) => {
  const items = (event.clipboardData || window.clipboardData).items;
  const blob = items[0].getAsFile();
  const reader = new FileReader();

  reader.addEventListener("load", (event) => {
    const img = new Image();
    img.src = event.target.result;
    target.appendChild(img);
  });

  reader.readAsDataURL(blob);
});

body {
  font-family: sans-serif;
}
#target {
  border: 2px solid;
  padding: 1rem;
  height: 150px;
}
img {
  margin: 0.5rem;
}

结果

结果如下所示。首先单击蓝色正方形，然后选择文本“在此粘贴”，并使用您的操作系统特定的键盘组合从剪贴板粘贴（例如，Windows 上的 Ctrl+V）。

规范

规范
剪贴板 API 和事件 # dom-clipboard-write

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。