Chrome extensions support copying image to clipboard?

Question

I searched with glasses and did not find the answer. The new clipboard API supports copying an image to the clipboard using the document.exec command . If so, how to copy the data url image to the clipboard as an image?

I am a developer of the extension Screenshot of a webpage, and I am looking for a way to copy the image to the clipboard. I am also looking for a way to open the image using special software.

Answer 1

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

code>

Answer 2

clipboardData API is almost implemented in all browsers, so instead of the documentemnt.exec command, you can try below also refer to the link below, which has a similar use case like 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', ...);

Answer 3

Today, 7 years later, this is the most stellar issue in Google Chrome. JavaScript is used to copy images. And now it is possible!

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

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

and here: https://w3c.imtqy.com/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 check it here: http://w3c-test.org/clipboard-apis/async-write-image-read-image-manual.https.html

(Now only Chrome 76 beta is supported)