如何在oncopy事件中将图像设置为剪贴板数据

我想从选定区域到OS缓冲区的canvas（如画家）中实施ctrl + c事件。基于this的答案我可以添加copy监听器并将剪贴板数据更改到那里 - 这与文本完美配合。但是我找不到如何将Image/ImageData对象放在那里。这里是MDN copy文档和setData。似乎没有什么关于image/*格式。那么Specification也没有说什么。但我闻到，如果第一个参数在setData中命名为format，那么应该有办法将文件放在那里。如何在oncopy事件中将图像设置为剪贴板数据

此处，我走了这么远：

document.addEventListener('copy', function(e) { 
    var data = ctx.getImageData(params.left, params.top, params.width, params.height); 
    var file = new File(data.data, "file.png", {type: "image/png"}); 
    e.clipboardData.items.add(file, 'image/png'); // This doesn't work, But it create the structure like on the image below(with items and types, but without FileList) 
    e.clipboardData.setDragImage(tool.img, 10, 10); // doesn't work 
    e.clipboardData.setData("image/png", tool.file); // doesn't work 
    e.preventDefault(); 
})

我还发现setDragImage方法，我实现了，但把Image后它不会出现在缓冲区中。

注：

当我粘贴图像FROM我的剪贴板“粘贴”事件显示事件结构像图像波纹管，所以我想我需要创建类似的东西。

任何想法？

p.s.我也知道document.execCommand('copy');，但它不适用于chrome（至少在我的情况下），所以我不想使用它。

来源

2017-07-10 deathangel908

从我的观察和调查只说到：

Chrome不支持"image/png"类型，这不是由剪贴板API规范所要求的格式。（Chrome bug）
Firefox至少会尝试在剪贴板上放入一个带有"image/png"类型的DataTransferItem，但我还没有弄清楚要使用哪种数据格式。（64基PNG，有或没有data:image/png;base64,前缀不起作用粘贴到PowerPoint，也不atob(<the base64 PNG without prefix>)，据我已经试验。）然而
"text/html"是必需的。当在谷歌文档被触发copy事件，这似乎上传一张图片，然后穿上看起来像这样剪贴板的HTML片段：
```
<meta charset="utf-8"> 
<b style="font-weight:normal;" id="docs-internal-guid-abcdefg-abcd-abcd"> 
    <img src="https://lh4.googleusercontent.com/a-very-long-identifier" width="659px;" height="312px;" /> 
</b> 
```
使用evt.clipboardData.setData("text/html", fragment)。然后，例如， Microsoft Office应用程序将下载该图像并将其嵌入到文档中。我不知道它是否在MacOS或Linux上执行相同的操作。顺便说一下，数据URI不会像imgsrc那样工作。

来源

2017-07-25 18:25:43 ZachB

如何在oncopy事件中将图像设置为剪贴板数据

回答

相关问题