跨浏览器复制图像到剪贴板

Question

我正在尝试在我的网站应用程序中实现将图片复制到剪贴板的功能，并且这个功能应该在所有浏览器上工作，或者至少在Chrome、Safari和Firefox浏览器中。但是我实现的功能只在Chrome浏览器中正常工作，而在Firefox和Safari浏览器中无法正常工作。

我使用了:

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

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

• 在Chrome浏览器中运行正常，

  • 但在Firefox中不行，因为Firefox不支持clipboardItem。根据这个文档。
  • 而且在Safari中也不工作，它会抛出一个错误，即navigator.clipboard.write对象未定义。
  • 我做了一次谷歌搜索，并了解到了document.execCommand，Mozilla开发者文档说它已经被弃用了。文档。

• 我正在使用React和TypeScript，所以我也考虑过npm包，但几乎所有的包都使用clipboardItem，其余的甚至不能复制图像，只能将我的blob数据复制为纯文本或HTML [可能是我的使用问题，因为自述文件没有很好地编写]。

  • 我尝试了以下Node.js包。
  1. r-copy-image-clipboard：将图像复制为文本/HTML格式。
  2. react-copy-to-clipboard也只是复制文本。

我看到的Stack Overflow回答

• https://dev59.com/YF4c5IYBdhLWcg3weqa9#57546936
• https://dev59.com/YF4c5IYBdhLWcg3weqa9#45582858
• https://dev59.com/oVwX5IYBdhLWcg3w-DbJ#40547470

如果您需要一些额外的信息来理解我的疑问，请提出来，感谢您宝贵的时间

- Dinesh Patil

Answer 1

这里回复有些晚了，但这可能会对未来的某个人有所帮助。

Mac Safari有特定的要求，需要一个剪贴板项目的Promise。

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

参考自这里：link

- Ragunath Venkatesan