How to copy images

Many modern browsers support copying images to the clipboard in the formats PNG and SVG. Other formats are not yet supported for security reasons.

The modern way

Using the Async Clipboard API

The Clipboard.write() method takes an array of ClipboardItem objects and returns a Promise that resolves when the image is successfully written to the clipboard. Clipboard.write() can only be used from the window object that has focus.

The classic way

Using navigator.clipboard.writeText()

While not all browsers support navigator.clipboard.write() for binary data yet, they all support navigator.clipboard.writeText(). If you want to copy an SVG image, instead of copying the image itself, you can copy the SVG source code. For PNG images, you are unfortunately out of luck.

Progressive enhancement

const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);
  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Further reading

• Unblocking clipboard access

Demo