Javascript Mozilla 中的剪贴板 SetData 错误

Question

我想以编程方式复制图像。我使用了 executeCommand('copy')，但它不起作用，所以我通过 document.addEventListener('copy', modifyCopy); 覆盖复制侦听器在 modifyCopy 函数中，我将 base64 编码的字符串转换为 blob url 并通过 e.clipboardData.setData('image/png',blobUrl); 将其设置到剪贴板中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。

text/plain
text/uri-list
text/csv
text/html
image/svg+xml
application/xml、text/xml
application/json

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

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

Answer 2

非常抱歉，但是 JavaScript 语言不可能像你想的那样做，请在 C#:

中输入下面的代码

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

一些函数和 APIs 还没有在 JavaScript 中退出，因为一些安全和政策原因，比如 Clipboard.SetImage，这个代码中的图像带有 Bitmap 函数被创建并放入剪贴板，然后像 Paint、Microsoft Office、Adobe productions 这样的应用程序可以找到它，但是 JavaScript 没有 API 或类似上面代码的函数。

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

前段时间我用Windows10snipping tool和Linuxshutter截取部分桌面，然后用Telegram发给我朋友，我看到一个简单的 Ctrl+V 我可以将裁剪的部分粘贴到聊天区域，裁剪的部分自动复制到我的剪贴板中，我搜索了关于它但不像现在这样，我深入搜索它并发现它，无法在浏览器区域之外复制剪贴板中的图像。

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

抱歉有个坏消息。

Javascript Mozilla 中的剪贴板 SetData 错误

Javascript Clipboard SetData Error in Mozilla

javascript

jquery

base64

image

clipboarddata