Copy image to clipboard using JavaScript

Question

I am trying to copy an image to clipboard using JavaScript. I have tried these solutions but get the error:

Uncaught (in promise) DOMException: Document is not focused.

There is this article which shows:

try {
  const imgURL = '/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

But this gives the error:

VM2303:12 TypeError: Failed to fetch "Failed to fetch"

...along with CORS warning.

I have also tried converting an image data URI into a blob and using:

navigator.clipboard.write([
    new ClipboardItem({
        'image/png': blob
    })
])

...but this also gives the following error:

Uncaught (in promise) DOMException: Document is not focused

Note that I only need to do this with local images uploaded client-side (has a data URI as source). So everything is on the same server and requires no back-end.

Have you tried explicitly giving focus to the document `window.focus();`? — Andre Nuechter, Feb 25 '20 at 18:04
Where would this go? I tried calling it right before (as well as focusing the actual image element) and it doesn't make a difference. — Cybernetic, Feb 25 '20 at 18:05
I would put it before the line where you try to write to the clipboard. It was worth a shot... — Andre Nuechter, Feb 25 '20 at 18:08

Zeal · Accepted Answer · 2020-02-25T18:48:12.047

If you are trying to fetch an image from a domain you don't control, you will need to implement some server-side code to fetch the image to your domain to avoid cross-origin issues. If you will be fetching the image from a domain you control, you need to serve the images with the CORS header. Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: https://domain-you-are-fetching-from.example.

Edit: If you are using existing data URIs, you can convert them to blobs without using fetch. See Blob from DataURL?

You could also load the data URI in an image element, write that image to a canvas, and use the canvas.toBlob() method to produce a blob.

const image = document.getElementsByTagName('img')[0]
image.addEventListener('click', e => {
  const canvas = document.createElement('canvas')
  canvas.width = image.naturalWidth
  canvas.height = image.naturalHeight
  const context = canvas.getContext('2d')
  context.drawImage(image, 0, 0)
  canvas.toBlob(blob => {
    navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]).then(() => {
      console.log('Copied')
    })
  })
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" width="20" alt="">
</body>
</html>

Im my case the images are uploaded client side. They exist as a data URI applied to the source of an img element. So they are all on the same domain, and require no server side code. Is it possible copy this kind of image to the clipboard using JS? — Cybernetic, Feb 25 '20 at 18:36

score 0 · Answer 2 · answered Feb 25 '20 at 18:11

0

Actually, your code is 100% correct, but due to security reasons, user must focus on document to copy anything. You can add a click event to copy test.

button.onclick = ()=>{
    copyImage();
};

answered Feb 25 '20 at 18:11

Sarthak Pokharel

33
1
7

Doesn't work. See the Fiddle here https://jsfiddle.net/CyberneticSean/02d7tn9j/2/ – Cybernetic Feb 25 '20 at 18:19

Copy image to clipboard using JavaScript

2 Answers2