CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24650

Chrome extensions support copy image to clipboard?

I search in goggle and didn't find any answer. The new clipboard API support copy image to clipboard by using document.exec command. 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.

Upvotes: 8

Views: 5005

Answers (3)

Gomes
Gomes

Reputation: 3330

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

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', ...);

Upvotes: 1

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24650

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.org/2019/06/chrome-76-beta-dark-mode-payments-new.html

You can read the full draft here: https://www.chromestatus.com/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.org/clipboard-apis/async-write-image-read-image-manual.https.html

(Now it support only Chrome 76 beta)

Upvotes: -1

Cyanny
Cyanny

Reputation: 530

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

Upvotes: 1

Related Questions