Question

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

这是我到目前为止的地方：

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中不起作用（至少在我的情况下），所以我不想使用它。

Answer 1

仅根据我的观察和调查发言：

Chrome不支持"image/png"类型，这不是Clipboard API规范所要求的格式。（Chrome bug）。
Firefox至少会尝试在剪贴板上放置一个"image/png"类型的DataTransferItem，但我还没想出要使用的数据格式。（基础64 PNG，有或没有data:image/png;base64,前缀，无法粘贴到PowerPoint中，atob(<the base64 PNG without prefix>)也没有，只要我进行了实验。）
"text/html"是必需的。在Google文档中触发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不能用作img src。

如何在oncopy事件中将Image设置为clipboardData

1 个答案: