如何在Javascript中将图片复制到剪贴板？

Question

如何使用JavaScript将图像放入剪贴板（在copy事件处理程序中），就像在浏览器中右键单击图像并从上下文菜单中选择“复制图像”一样。

此脚本显示剪贴板内容的详细信息。对于已复制的图像，它会打印出：

DataTransfer { dropEffect: "none", effectAllowed: "uninitialized", items: DataTransferItemList[2], types: Array[2], files: FileList[1], mozItemCount: 1, mozCursor: "auto", mozUserCancelled: false, mozSourceNode: null }
DataTransferItem { kind: "string", type: "text/html" }
DataTransferItem { kind: "file", type: "image/png" }
Array [ "text/html", "Files" ]
File { name: "image.png", lastModified: 1504122845696, lastModifiedDate: Date 2017-08-30T19:54:05.696Z, webkitRelativePath: "", size: 385273, type: "image/png" }

所以问题可以重新表述为 - 如何在 copy 事件处理函数中将文件附加到 clipboardData 中？

document.addEventListener('copy', (event) => {
  // event.clipboardData.?
  // maybe event.clipboardData.setData(?)
})

使用setData()方法的演示不起作用。

- czerny

---

你搜索过吗？https://dev59.com/oVwX5IYBdhLWcg3w-DbJ - epascarello

当您在图像上右键单击并选择上下文菜单中的“复制图像”时，它已经保存在剪贴板中。 - Koushik Chatterjee

@koushik-chatterjee 是的。我想以编程方式模拟这种行为。 - czerny

好的，让我为工作演示添加一个答案。 - Koushik Chatterjee

@epascarello，感谢您提供的链接。 - czerny

可能是复制图像到剪贴板的重复问题。 - Stephen P

Answer 1

//get reference to the div
var div = document.getElementById('someDiv');

//attach a paste event
div.addEventListener('paste', function(ev){
    var imgFile = null;
    var idx;
    var items = ev.clipboardData.items;
    for(idx=0;idx<items.length;idx++) {
        //check if any content is file
        if(items[idx].kind==="file") {
            //take that file to imgFile
            imgFile = items[idx].getAsFile();
            break;
        }
    }
    if(imgFile==null) {return;}
    
    //create a File reader
    var reader = new FileReader();
    reader.onload = function() {
        //create an img DOM object
        var img = new Image();
        //reader.result is nothing but the Base64 representation
        img.src = reader.result;
        
        //operate the DOM, clear the div and append the img
        div.innerHTML = '';
        div.appendChild(img);
    }
    //read that file using the reader
    reader.readAsDataURL(imgFile);
});

<div id="someDiv" style="min-width: 200px;min-height: 200px; border: 1px solid red">
Paste an image here (using Ctrl + V)

</div>

- Koushik Chatterjee

---

问题是关于将图像写入剪贴板并处理“复制”事件。这个回答似乎是关于“粘贴”事件和从剪贴板读取图像。 - czerny

你不需要处理那个，你需要处理的是粘贴事件以将其放置在某处。 - Koushik Chatterjee

哦，看起来你想以编程方式调用“复制图像”操作。 - Koushik Chatterjee