Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 642
Aminadav Glickshtein Avatar asked Mar 02 '12 11:03

Aminadav Glickshtein


2 Answers

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

like image 117
Cyanny Avatar answered Oct 31 '22 20:10

Cyanny


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', ...);
like image 1
Gomes Avatar answered Oct 31 '22 21:10

Gomes