Chrome扩展支持将图像复制到剪贴板吗？

Question

我在谷歌上搜索了一下，并没有找到答案。新的剪贴板API支持使用document.exec command将图像复制到剪贴板。如果可以的话，如何将图像data url作为图像复制到剪贴板中呢？

我是Webpage Screenshot扩展程序的开发者，我正在寻找一种复制图像到剪贴板的方法。我还在寻找一种用特定软件打开图像的方法。

- Aminadav Glickshtein

Answer 1

clipboardData API已经在几乎所有的浏览器中实现了，因此您可以尝试下面的方法，而不是使用docuemnt.exec命令。您还可以参考下面的链接，该链接具有与您类似的用例。

https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

clipboardData.setData('text/plain', selection.getText());
clipboardData.setData('application/officeObj', selection.serialize());
clipboardData.setData('image/bmp', draw(selection));
clipboardData.setData('text/html', ...);

- Gomes

---

你可以安装 Lucidchart 的 Chrome 扩展程序并进行测试，了解一下它的使用。你会发现你能够复制粘贴他们的自定义图形。 - Gomes

Answer 2

我正在开发一个名为ScreenShotShare的chrome扩展程序，我需要将剪切板上的图像复制到剪贴板上。我找到了适合我的解决方案。
1. 在manifest.json文件中添加"clipboardWrite"和"clipboardRead"权限
2. 在background.js中的background.html中进行复制操作
3. 将代码添加到background.html中
4. 我在background.js中实现了"copyImageToClipboard"函数

copyImageToClipboard: function () {
    var img = $('clipboard-img');
    img.src = localStorage[this.screenshotURIName]; // I store the image URI in localStorage
    var div = $('clipboard-div');
    div.contentEditable = true;
    var range;
    if (document.createRange) {
      range = document.createRange();
      range.selectNodeContents(div);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      div.focus();
      document.execCommand('copy');
    }
    div.contentEditable = false;
  }

- Cyanny

---

它对我不起作用。什么都没有复制（只有指定的图像标题）。你有任何可行的例子吗？ - Shluch

我发现这种方法只适用于像Evernote这样的文本编辑器，而不适用于Word和iPages。一个朋友告诉我：聚焦图片并触发cmd+c或ctrl+c，我尝试了一下，但没有成功。有人说在webkit中，存在一个覆盖KeyboardEvent的keyCode的bug，我尝试了http://jsbin.com/EruQEFoH/2/edit，但还没有成功。 - Cyanny

Answer 3

今天距离最初发布已经过去了7年，这是Google Chrome中星标最多的问题。使用JavaScript复制图像现在成为可能！

Chrome 76 Beta支持此功能：https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html

您可以在此处阅读完整草案： https://www.chromestatus.com/feature/5074658793619456

以及这里：https://w3c.github.io/clipboard-apis/#async-clipboard-api

示例：

var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});

  const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
  await navigator.clipboard.write([clipboardItemInput]);

您可以在此处进行测试：http://w3c-test.org/clipboard-apis/async-write-image-read-image-manual.https.html

（目前仅支持Chrome 76 beta版本）

- Aminadav Glickshtein