I search in goggle and didn't find any answer. The new clipboard API support copy image to clipboard by using document.exec mand. If yes, How can I copy image data url to clipboard as image?

I am the developer of Webpage Screenshot extension and I search for a way to copy the image to clipboard. I also search for a way to open the image with specific software.

I search in goggle and didn't find any answer. The new clipboard API support copy image to clipboard by using document.exec mand. If yes, How can I copy image data url to clipboard as image?

I am the developer of Webpage Screenshot extension and I search for a way to copy the image to clipboard. I also search for a way to open the image with specific software.

• javascript
• google-chrome
• google-chrome-extension

3 Answers 3

I am developing a ScreenShotShare chrome extension, I have the need to copy clipped image to clipboard as well. And I found the solution works for me.
1. Add "clipboardWrite","clipboardRead" to the permissions in manifest.json file
2. do copy work in the background.html with background.js
3. add to background.html
4. I implement the "copyImageToClipboard" to function in 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;
  }

clipboardData API is almost implemented in all the browser, so instead docuemnt.exec mand, you can try below also refer the below link which has similar use case as yours.

https://www.lucidchart./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', ...);

Today 7 years later, it's the most starred issue in Google Chrome. To copy images using JavaScript. And now it's possible!

Chrome 76 Beta supports it: https://blog.chromium/2019/06/chrome-76-beta-dark-mode-payments-new.html

You can read the full draft here: https://www.chromestatus./feature/5074658793619456

and here: https://w3c.github.io/clipboard-apis/#async-clipboard-api

Example:

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

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

You can test it here: http://w3c-test/clipboard-apis/async-write-image-read-image-manual.https.html

(Now it support only Chrome 76 beta)