Mozilla 中的 Javascript 剪贴板 SetData 错误

Question

我想以编程方式复制图像。我使用了 executeCommand('copy')，但它不起作用，所以我通过 document.addEventListener('copy', modifyCopy); 覆盖复制监听器在 modifyCopy 函数中，我转换了 base64将字符串编码为 blob url 并通过 e.clipboardData.setData('image/png',blobUrl); 将其设置到 clipBoard 中；在 chrome 中它不起作用，但在 Mozilla 中设置数据后我去绘制它启用油漆粘贴但会出现以下错误。

您可以检查 fiddle 以了解我尝试过的内容。 http://jsfiddle.net/32mbd1o0/16/

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

Answer 1

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

• 文本/纯文本
• 文本/uri-列表
• 文本/csv
• 文本/html
• 图片/svg+xml
• 应用程序/xml，文本/xml
• 应用程序/json

一种可能的解决方法 described here , 将图像作为 html 数据复制到剪贴板。这可行，但前提是您要粘贴到 Microsoft Windows Word 或其他文字处理器等程序上。处理图形(绘画、photoshop 等)的程序不理解剪贴板上的内容。

最后，您还可以为依赖于 API clipboard.setImageData() 的 firefox 创建一个扩展。 . clipboard.setImageData 允许您使用图像数据填充剪贴板。这个 API 与 Chrome 应用程序 API 兼容(它是在 Firefox 57 中添加的)并且它仍然应该被认为是实验性的。此 API 需要 clipboardWrite 权限。