Question

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

我正在考虑创建一个小型服务器组件，该组件可以采用图像的base64表示并返回＆＃34; normal＆＃34; png图像，我将能够复制到剪贴板。这可以作为一种解决方法吗？

修改要清除：我使用canvas.toDataURL("image/png", 0.7)从画布创建图像，然后将src标记的img属性设置为结果。然后，我可以选择＆＃34;复制图像＆＃34;右键单击图像时从上下文菜单中。问题是，我无法将图像粘贴到Word和电子邮件中（至少是Outlook）。粘贴到Wordpad和mspaint工作正常。

Answer 1

您可以将画布转换为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 2

用于图像的剪贴板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]); 
});

Answer 3

1个班轮容易得多：
假设你有一块画布。
以下代码会将画布（作为blob-> PNG图像）复制到剪贴板。

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

Answer 4

4年后的今天，它是Google Chrome浏览器中最引人注目的问题。使用JavaScript复制图像。现在有可能！

Chrome 76 Beta支持它：https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html

您可以在此处阅读完整的草稿： https://www.chromestatus.com/feature/5074658793619456

此处：https://w3c.github.io/clipboard-apis/#async-clipboard-api

示例：

var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});

  const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
  await navigator.clipboard.write([clipboardItemInput]);

您可以在这里进行测试：http://w3c-test.org/clipboard-apis/async-write-image-read-image-manual.https.html

（现在仅支持Chrome 76 beta）

更多信息：文档草案[包含示例]：https://docs.google.com/document/d/1lpi3-9vBP_1b7hZc2xBs0s_HaACJ6UigZZqHlJSNeJg/edit#heading=h.do75bvtsde7a

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

4 个答案: