Javascript 将图像复制到剪贴板

在一些前端应用程序中，我们可能需要让用户将图像复制到剪贴板中，以便他们能够方便地将图像粘贴到其他应用程序中。在Javascript中，我们可以通过以下步骤将图像复制到剪贴板中：

1. 创建一个新的图片对象并将其加载到页面上：

let img = new Image();
img.src = 'http://example.com/image.png';

2. 创建一个新的canvas元素，并将图像绘制到canvas上：

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

3. 将canvas元素转换为图像数据，然后将其存储在剪贴板中：

canvas.toBlob(function(blob) {
  navigator.clipboard.write([new ClipboardItem({
    [blob.type]: blob
  })]);
});

以上步骤使用了canvas.toBlob()函数将canvas元素转换为blob对象。然后我们使用navigator.clipboard.write()函数将blob对象存储在剪贴板中。

注意：这种方法需要浏览器支持navigator.clipboard.write()，目前只有Chrome和Firefox支持该方法。

完整代码片段

let img = new Image();
img.src = 'http://example.com/image.png';

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

canvas.toBlob(function(blob) {
  navigator.clipboard.write([new ClipboardItem({
    [blob.type]: blob
  })]);
});

参考链接

• MDN Web文档：Canvas.toBlob()
• MDN Web文档：Clipboard API