CODEWITHSUNDEEP
javascripthtmlgoogle-chromeclipboardcopy-paste
Mike Jaffe
Mike Jaffe

Reputation: 562

Copy image to clipboard with javascript in Chrome only

Is it possible to have javascript copy an image to a clipboard? I'm looking to replicate the "Copy Image" function that Chrome has when you Right/Control click an image in the browser.

I've seen solutions for text, some Flash based solutions for text as well. But I'm interested in image data only. And only in Chrome. Don't care about IE or FF for this requirement.

Upvotes: 20

Views: 11204

Answers (2)

Ivan Kuckir
Ivan Kuckir

Reputation: 2549

In 2020, it can be done with the Asynchronous Clipboard API, see here: https://arnellebalane.com/blog/async-clipboard-api/ (includes a demo).

Upvotes: 2

Alan Tam
Alan Tam

Reputation: 2057

Update: From Chrome 43, Firefox 41, Opera 29 and Safari 10 onwards, any website can do document.execCommand("copy") and document.execCommand("cut") anytime.

Outdated:

Just as Copy Image to Clipboard from Browser in Javascript? explained, it is a security hole if any website is allowed to take/put data into users' OS just because she navigated to a malicious website.

If you are targeting Chrome only, you have two solutions.

  1. Write a Chrome Extension and ask your users to install it.

  2. Write a Chrome App and ask your users to install it. Your users need not to be running your Chrome App. Scripts in the domains the installed Chrome App registers will automatically gain this privilege.

Your app/extension has to declare the clipboardWrite privilege (see https://developer.chrome.com/extensions/permissions).

Then you can call document.execCommand("Copy") after you have manipulated the window.selection to point to the image you want to copy.

Upvotes: 9

Related Questions