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

我想在画布中实现ctrl+c事件（就像在画师中一样），从选定区域到操作系统缓冲区。根据答案，我可以添加

复制
监听器并在那里更改剪贴板数据-这与文本完美结合。但是我找不到如何将
图像
/
图像数据
对象放在那里。这里是MDN文档和文档。似乎没有任何关于
image/*
格式的内容。嗯，我什么也没说。但我感觉到，如果
setData
中的第一个参数名为
format
，那么应该有一种方法将文件放在那里

到目前为止，我的目标是：

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(); 
})

我也找到了这个方法，我实现了它，但在放入
图像后，
它并没有出现在缓冲区中

注意：

当我从剪贴板粘贴图像时，我的“粘贴”事件显示的事件结构如下图所示，因此我想我需要创建类似的内容

有什么想法吗

p、 我也知道，但它在chrome中不起作用（至少在我的情况下），所以我不想使用它。
仅从我的观察和调查来看：


Chrome不支持
“image/png”
类型，这不是剪贴板API规范所要求的格式

Firefox至少会尝试将带有
“image/png”
类型的DataTransferItem放在剪贴板上，但我还没有弄清楚要使用什么数据格式。（base64 PNG，无论是否带有
数据：image/PNG；base64，
前缀，都无法粘贴到PowerPoint中，就我的实验而言，
atob（）
）

“text/html”
是必需的。当Google Docs中触发
复制
事件时，它似乎上载了一幅图像，然后将一个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 apps将下载该图像并将其嵌入文档中。我不知道它在MacOS或Linux上是否做同样的事情。顺便说一下，数据URI不能作为
img
src