Mozilla中的Javascript剪贴板SetData错误

我想以编程方式复制图像。我使用了

executeCommand（'copy'）

，但该命令不起作用，因此我通过

document.addEventListener（'copy'，modifyCopy'）覆盖复制侦听器

在modifyCopy函数中，我将base64编码的字符串转换为blob url，并通过

e.clipboardData.setData（'image/png'，blobUrl）将其设置到剪贴板中

在chrome中不起作用，但在Mozilla中，它在设置数据后，当我去绘制它时，会启用paint paste，但会出现以下错误

你可以查一查我试过的小提琴。

函数b64toBlob（b64Data、contentType、sliceSize）{
contentType=contentType | |“”；
切片大小=切片大小| | 512；
var byteCharacters=atob（b64Data）；
var ByteArray=[]；
对于（变量偏移量=0；偏移量{
var contentType='image/png'；
变量B64数据='IVBORW0KGGOAAAANSUHEUGAAAAAFCAYAAACNBYBAAHELEQVQI12P4//8/W38GIAXDIBKE0DHXGLJNBAO9TXL0Y4OHWAAABJRU5ERKJGG='；
var blob=b64toBlob（b64Data，contentType）；
var blobUrl=URL.createObjectURL（blob）；
警报（blobUrl）；
e、 setData（'image/png'，blobUrl）；
e、 预防默认值（）；
};
文件。添加的文件列表（“副本”，修改副本）；
$（“.copyable”）。单击（函数（e）{
$（this.attr（“contenteditable”，true）；
document.execCommand（'copy'）；
});

在复制和剪切事件期间，Firefox仅支持这些数据类型

• 文本/纯文本
• 文本/uri列表
• 文本/csv
• 文本/html
• image/svg+xml
• application/xml、text/xml
• 应用程序/json

一种可能的解决方法是将图像作为html数据复制到剪贴板。这是可行的，但仅当您希望粘贴到诸如Microsoft Windows Word或其他文字处理器之类的程序时。用于处理图形（绘画、photoshop等）的程序无法理解剪贴板上的内容

---

最后，您还可以为firefox创建一个依赖API的扩展。clipboard.setImageData允许您使用图像数据填充剪贴板。此API与Chrome应用程序API（它是在Firefox 57中添加的）兼容，因此仍应将其视为实验性的。此API需要clipboardWrite权限。

非常抱歉，但是不可能让

JavaScript

语言按照您的意愿执行，请参见

C中的以下代码：

一些函数和API在
JavaScript
中不存在，但由于一些安全和策略原因，如
Clipboard.SetImage
，这将创建此代码中带有
Bitmap
函数的图像并将其放入剪贴板，然后Paint、Microsoft Office、Adobe productions等应用程序可以找到它，但是对于
JavaScript
，没有API或函数来实现上述代码

我花了大约一个小时的时间来回答你的问题，我有一个想法，我想将图像更改为
base64
，然后复制到剪贴板，但这不是一个好主意，因为它是文本，纯文本和其他应用程序只看到文本，我知道这很糟糕，但事实确实如此

有时以前，我使用Windows 10
剪切工具
和Linux
shutter
来剪切桌面的一部分，然后通过发送给我的朋友，我看到，通过简单的Ctrl+V，我可以将剪切的部分粘贴到聊天区，自动将剪切的部分复制到我的剪贴板，我搜索了一下，但不像现在这样，我对它进行了深入的搜索，结果发现，并没有办法将剪贴板中的图像复制到浏览器区域的外侧

只有一种方法可以仅为浏览器复制，将图像转换为
base64
并将其保留在剪贴板中，然后仅在浏览器中将其作为
img
标记，并将
base64
文本设置为
src
属性为
img
标记。就这样

对不起，坏消息

function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  var slice = byteCharacters.slice(offset, offset + sliceSize);

  var byteNumbers = new Array(slice.length);
  for (var i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);
 }

 var byteArray = new Uint8Array(byteNumbers);

  byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
 return blob;
}

const modifyCopy = e => {
                var contentType = 'image/png';
                var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
                var blob = b64toBlob(b64Data, contentType);
                var blobUrl = URL.createObjectURL(blob);
alert(blobUrl);
                e.clipboardData.setData('image/png',blobUrl);
                e.preventDefault();
            };

document.addEventListener('copy', modifyCopy);

 $(".copyable").click(function (e) {
                $(this).attr("contenteditable", true);
                document.execCommand('copy');
            });

// Copy the selected area to the clipboard.
private void CopyToClipboard(Rectangle src_rect)
{
    // Make a bitmap for the selected area's image.
    Bitmap bm = new Bitmap(src_rect.Width, src_rect.Height);

    // Copy the selected area into the bitmap.
    using (Graphics gr = Graphics.FromImage(bm))
    {
        Rectangle dest_rect =
        new Rectangle(0, 0, src_rect.Width, src_rect.Height);
        gr.DrawImage(OriginalImage, dest_rect, src_rect, GraphicsUnit.Pixel);
    }

    // Copy the selection image to the clipboard.
    Clipboard.SetImage(bm);
}