图片复制粘贴，基于 Canvas 与 Navigator.clipboard 实现

前端

2024-02-03 22:57:38

绪论

图片复制粘贴功能在很多场景都有需求，但过去只能复制粘贴文本。本文将介绍如何使用 Canvas 和 Navigator.clipboard API 实现图片复制粘贴功能，让用户能够右键复制图片，并粘贴到微信聊天框内。

原理与实现

要实现图片复制粘贴功能，我们首先需要将图片数据转化为可复制的格式。在浏览器的环境中，Canvas 提供了一种便捷的方式来进行图片数据的转化。具体步骤如下：

创建一个 Canvas 元素并将其设置为与图片相同的大小。
使用 Canvas 的 drawImage() 方法将图片绘制到 Canvas 上。
使用 Canvas 的 toDataURL() 方法将 Canvas 上的图片数据导出为DataURL。
将DataURL存储在剪贴板中。

当用户右键复制图片时，以上步骤就会被执行。接下来，我们需要在粘贴事件中获取剪贴板中的DataURL，并将其转换为图片数据。我们可以使用以下步骤来实现：

从剪贴板中获取DataURL。
使用 Image() 对象加载DataURL。
将加载后的图片数据显示在需要粘贴的位置。

代码示例

// 创建一个 Canvas 元素
const canvas = document.createElement('canvas');

// 设置 Canvas 的大小与图片相同
canvas.width = image.width;
canvas.height = image.height;

// 将图片绘制到 Canvas 上
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);

// 将 Canvas 上的图片数据导出为DataURL
const dataURL = canvas.toDataURL();

// 将DataURL存储在剪贴板中
navigator.clipboard.writeText(dataURL);

// 在粘贴事件中获取剪贴板中的DataURL
document.addEventListener('paste', (event) => {
  const dataURL = event.clipboardData.getData('text/plain');

  // 使用 Image 对象加载DataURL
  const image = new Image();
  image.onload = () => {
    // 将加载后的图片数据显示在需要粘贴的位置
    document.body.appendChild(image);
  };

  image.src = dataURL;
});