Copy image to clipboard in cross browser

Question

I am trying to implement a copy image to the clipboard functionality on my web app and this functionality supposes to work in all browsers, or at least in chrome, safari, and firefox. But my implementation is working in chrome only, not in firefox and safari.

I USED

The image will be generated from the canvas as a blob.

navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);

This is working fine in chrome browser,
- But not in firefox because firefox doesn't support clipboardItem. as per this document.
- And also not working in Safari as well, it's throwing an error which is navigator.clipboard.write object undefined.
- I did a google search and get know about document.execCommand, and Mozilla developer docs say it's deprecated. Document.
I am using react and typescript so, I also thought about npm packages but almost all are using clipboardItem and others are not event copying image just copying my blob data as plain text or HTML [might be my usage issue, cause readmes are not written well way].
- I tried the following node packages.
1. r-copy-image-clipboard : copying image as text/html formate.
2. react-copy-to-clipboard also just copy the text.

Stackoverflow answers I have seen

IF you need some extra info to understand my doubt please ask, and thanks for your valuable time

score 0 · Answer 1 · answered Mar 16 '23 at 15:44

This is too late to reply here but this may help someone in future.

Mac safari has a specific requirement which requires a promise for clipboard item.

    const item = new ClipboardItem({
        'image/png': (async () => {
          const response = await fetch(imageurl)
          return await response.blob()
        })(),
      });
      navigator.clipboard.write([item]);

Refernece from here: link

Copy image to clipboard in cross browser

1 Answers1