Question

我在护目镜中搜索并没有找到任何答案。新的剪贴板API支持使用document.exec command将图像复制到剪贴板。如果是，我如何将图像data url复制到剪贴板作为图像？

我是网页截图扩展的开发者，我搜索了将图像复制到剪贴板的方法。我还搜索了使用特定软件打开图像的方法。

Answer 1

我正在开发一个ScreenShotShare chrome扩展程序，我还需要将剪切的图像复制到剪贴板。我发现解决方案对我有用 1.将“clipboardWrite”，“clipboardRead”添加到manifest.json文件中的权限
2.使用background.js在background.html中复制工作 3.添加到background.html
4.我实现了“copyImageToClipboard”以在background.js中起作用



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

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

Answer 2

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'，...）;

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）

Chrome扩展程序支持将图像复制到剪贴板

3 个答案: