javascript - 是否可以将 Canvas 图像复制到剪贴板？

Question

我使用 canvas.toDataURL("image/png", 0.7) 从我的 Canvas 对象创建了一个图像。从上下文菜单中保存图像效果很好，但将图像复制到剪贴板并将其粘贴到邮件或 word 文档中则不起作用。是否有可能使“复制到剪贴板”的行为方式与“普通”图像的行为方式相同？

我正在考虑创建一个小型服务器组件，它可以获取图像的 base64 表示并返回一个“正常”png 图像，我可以将其复制到剪贴板。这可以作为解决方法吗？

编辑: 澄清一下:我正在使用 canvas.toDataURL("image/png", 0.7) 从 Canvas 创建图像，然后设置 src 属性 img 标记到结果。然后，我可以在右键单击图像时从上下文菜单中选择“复制图像”。问题是我无法将图像粘贴到 Word 和电子邮件中(至少是 Outlook)。粘贴到写字板和 mspaint 中工作正常。

Answer 1

用于图像的剪贴板 API 现在可在 chrome 上使用

https://github.com/web-platform-tests/wpt/tree/master/clipboard-apis

const item = new ClipboardItem({ "image/png": blob });
navigator.clipboard.write([item]); 

Example

const canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#eee";
ctx.fillRect(10, 10, 50, 50);

//tested on chrome 76
canvas.toBlob(function(blob) { 
    const item = new ClipboardItem({ "image/png": blob });
    navigator.clipboard.write([item]); 
});