无需插件！一行JS复制图片到剪贴板，解决聊天框图片粘贴难的难题！

前端

2024-01-10 08:00:03

前阵子接到一个开发任务，是复制网页上的图片，并粘贴到的聊天工具中。这是一个很常见的操作，在日常工作中我们经常通过 QQ 截图、 Ctrl + C 将图片复制到聊天框。

方法一：使用截图工具

最简单的方法是使用截图工具，比如QQ截图、Snipaste等，截取图片后粘贴到聊天框即可。

优点：

操作简单，不需要安装任何软件
可以截取任意形状的图片

缺点：

需要手动截取图片，比较麻烦
有些截图工具会带有水印

方法二：使用复制到剪贴板的JavaScript库

更简单的方法是使用复制到剪贴板的JavaScript库，比如clipboard.js、copy-to-clipboard等。这些库可以帮助您一行代码将图片复制到剪贴板，然后直接粘贴到聊天框即可。

优点：

操作简单，一行代码即可复制图片
不需要安装任何软件
没有水印

缺点：

需要引入额外的JavaScript库
某些浏览器可能不支持

方法三：使用原生JavaScript代码

如果不想使用第三方库，也可以使用原生JavaScript代码来复制图片到剪贴板。

function copyImageToClipboard(image) {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);
  canvas.toBlob((blob) => {
    const data = new ClipboardData();
    data.setData('image/png', blob);
    navigator.clipboard.write(data);
  });
}