是否可以将画布图像复制到剪贴板？

问题描述

我已经使用 canvas.toDataURL（ image / png，0.7）从我的画布对象创建了一个图像。从上下文菜单中保存图像效果很好，但不能将图像复制到剪贴板并将其粘贴到例如邮件或Word文档中。

I've created an image from my canvas object by using canvas.toDataURL("image/png", 0.7). It works fine to save the image from the context menu but it doesn't work to copy the image to the clipboard and paste it into a mail or a word document for example. Is it possible to get "copy to clipboard" to behave the same way it does for a "normal" image?

我正在考虑创建一个小型服务器组件，以便将复制到剪贴板的行为与正常图像的行为相同？可以使用图片的base64表示形式，并返回正常 png图片，可以将其复制到剪贴板。

I'm thinking of creating a small server component that can take the base64 representation of the image and return a "normal" png image that I will be able to copy to clipboard. Could this work as a workaround?

编辑：
清除：我正在使用 canvas。 toDataURL（ image / png，0.7）从画布上创建图像，然后设置<$ c $的 src 属性c> img 标记到结果。然后，当我右键单击图像时，可以从上下文菜单中选择复制图像。然后的问题是我无法将图像粘贴到Word和电子邮件中（至少是Outlook）。

To clearify: I'm using canvas.toDataURL("image/png", 0.7) to create an image from the canvas and I then set the src attribute of an img tag to the result. I can then select "copy image" from the context menu when right clicking on the image. The problem is then that I can't paste the image into Word and emails (Outlook at least). Pasting into Wordpad and mspaint works fine.

推荐答案

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

Clipboard API for images are now available on chrome

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

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]);
});

这篇关于是否可以将画布图像复制到剪贴板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！