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.
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 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', ...);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With