Copy Image to Clipboard from Browser in Javascript?

Question

Is it possible to copy an image to the clipboard in javascript? I know how to copy text, but can you copy images?

Is it a security limitation?

Answer 1

The last answer is from 2010 and browsers have changed a lot since then. With this simple function, you can copy whatever you want (text, images, tables, etc) (on your page) to the clipboard. The function receives the element id or the element itself.

function copyElementToClipboard(element) {
  window.getSelection().removeAllRanges();
  let range = document.createRange();
  range.selectNode(typeof element === 'string' ? document.getElementById(elementName) : element);
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
 }

Answer 2

Use Clipboard API. There is an example on MDN specifically for images.

Note: today in 2021 ClipboardItem can be enabled in Firefox by setting dom.events.asyncClipboard.clipboardItem to true. The rest major browsers support it. So, add some checks and inform a user how the feature can be turned on.

Here is an example:

async function writeClipImg() {
  if (!('ClipboardItem' in window)) {
    return alert(
      "Your browser doesn't support copying images into the clipboard."
      + " If you use Firefox you can enable it"
      + " by setting dom.events.asyncClipboard.clipboardItem to true."
    )
  }
  try {
    const imgURL = document.getElementById('image').src
    const data = await fetch(imgURL)
    const blob = await data.blob()

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ])
    console.log('Fetched image copied.')
  } catch(err) {
    console.error(err.name, err.message)
  }
}

Answer 3

Yes, most of the scripts supports text only.

http://forums.mozillazine.org/viewtopic.php?f=25&t=1195035&start=0

The above site also discussing the same issue.

The following site said related to security issues,

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

but this won't work in latest version of Mozilla.

Answer 4

No, you can't copy images to the clipboard. Copying anything to the clipboard is a security limitation of every browser, but you may able to copy text to the clipboard in IE if they have the proper security settings. Here Mozilla lists some of the problems caused by programmatic access to the clipboard.