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

Question

我使用canvas.toDataURL("image/png", 0.7)从画布对象中创建了一个图像。它可以很好地从上下文菜单中保存图像，但是它不能将图像复制到剪贴板并将其粘贴到邮件或word文档中。是否有可能获得“复制到剪贴板”的行为方式，就像对待“正常”图像一样？

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

编辑：清洗:我使用canvas.toDataURL("image/png", 0.7)从画布中创建一个图像，然后将img标记的src属性设置为结果。然后，当右键单击图像时，我可以从上下文菜单中选择“复制图像”。问题是，我无法将图片粘贴到文字和电子邮件中(至少是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]); 

示例

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

Answer 2

您可以将画布转换为img，放入<div contenteditable>中，选择并复制它。

var img = document.createElement('img');
img.src = canvas.toDataURL()

var div = document.createElement('div');
div.contentEditable = true;
div.appendChild(img);
document.body.appendChild(div);

// do copy
SelectText(div);
document.execCommand('Copy');
document.body.removeChild(div);

SelectText函数来自https://stackoverflow.com/a/40547470/1118626

function SelectText(element) {
    var doc = document;
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

Answer 3

1艘班轮容易得多：

假设你有画布。

下面的代码将把画布(作为blob -> PNG图像)复制到剪贴板上。

canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})]))

• navigator.clipboard