Question

我有一个图像作为DataURL字符串。
我想以编程方式将此图像复制到ClipBoard。

我发现了两个功能，但它们都不起作用。虽然，第一个功能在复制文本时效果很好 - 复制（“Hello！”，“text”）;

PS我有“clipboardWrite”权限。

首先：

function copy(str, mimetype) {
    document.oncopy = function(event) {
        event.clipboardData.setData(mimetype, str);
        event.preventDefault();
    };
    document.execCommand("Copy", false, null);
}

第二

function copyImage(url){
    var img=document.createElement('img');
    img.src=url;
    document.body.appendChild(img);
    var r = document.createRange();
    r.setStartBefore(img);
    r.setEndAfter(img);
    r.selectNode(img);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');
}

Answer 1

似乎这是不可能的。自2012年以来，Chrome中出现了一个阻止它的错误！ https://bugs.chromium.org/p/chromium/issues/detail?id=150835

Answer 2

您可以使用以下方法将图像转换为字符串：

function getImageData(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var imgd = canvas.toDataURL("image/png");
    return imgd;
}

并且要复制到剪贴板，请尝试使用此page。

的解决方案

Answer 3

如果碰巧使用html2canvas，可以这样操作：
这会将带有html2canvas的内容转换为画布，然后生成其图像，然后将其另存为png。例如，

HTML：
<div id="copyToImage">Hello World!</div>

JavaScript：

$("#copyToImage").click(function() {
    html2canvas(document.querySelector("#copyToImage")).then(canvas => canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})])));
});

Answer 4

//使用Java Robot将图像复制到ClipBoard

public function getClientAttribute() {
    if ($this->sale) {
        return $this->sale->client;
    }
    return null;
}

将图像复制到剪贴板

4 个答案: