异步剪贴板 API“ClipboardItem 未定义” - Reactjs 将图像复制到剪贴板

Question

我正在研究 React js，我使用 npm 使用 create-react-app 创建了我的应用程序。我试图构建一个按钮来获取图像并将其写入剪贴板。幸运的是，我发现 this npm 库似乎工作正常！但是让我一直在想为什么我不能使用 ¿built-in? Asynchronous Clipboard API 来复制图像（文本复制工作正常）。我阅读了一个非常有启发性的指南here，并继续阅读其他很棒的指南here，所以我尝试了所有建议的代码，那里和其他页面（尽管它们似乎并没有真正改变功能，我必须尝试）。每次尝试编译时，我都会遇到同样的错误：“'ClipboardItem' 未定义 no-undef”。例如一个代码是这个：

const response = await fetch('valid img url of a png image');
const blob = await response.blob();
await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob})]);

看起来很简单，很容易理解。问题是当您需要将数据放入剪贴板可以读取的形式中，使其成为 blob，因为我需要 ClipboardItem 构造函数，而我的应用程序似乎无法识别它。不断返回 ClipboardItem 没有定义，或者，如果我以某种方式定义它，当然说它不是构造函数。我尝试使用 Blob() 等其他构造函数，但遇到了同样的问题。最后一件事让我一直在想，因为我是编程世界的新手，如果有一些基本的东西，我不知道像这样的 Web API 与 node 或 Reactjs 的交互，如果有解决方案，当然！提前谢谢你们，你们太棒了！

编辑：按要求添加整个组件代码：

import React from "react";
  
function TestingClipAPI () { 

  async function handleScreenshot () {
    const response = await fetch('https://i.postimg.cc/d0hR8HfP/telefono.png');
    const blob = await response.blob();
    await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob})]);
  };
  
  return (
    <div>
     <button onClick={handleScreenshot} id="buttonID">test</button>
    </div>
  )
};

export default TestingClipAPI;

可能的问题：这可能是因为 CRA（Create-React-App）配置 - similar issue。可以完成库linked 之类的操作，创建一个画布并从那里复制图像。

解决方案或使其正常工作的方法：在使用 ClipboardItem 之前以这种方式调用：

const { ClipboardItem } = window;

注意：这也适用于存在相同问题的其他构造函数，例如 toBlob 和 HTMLCanvasElement。

Answer 1

要寻找的东西：

1. 浏览器支持Clipboard
2. HTTPS 或 localhost 上的安全源。 See this post.
3. 如何调用函数 - 在 OP 的情况下 - onClick 和异步。

问题是 onClick 默认情况下不是异步的，您没有等待响应，并且您在 navigator.clipboard 中也有错字。

  const handleScreenshot = async () => {
    try {
      const response = await fetch(
        "https://i.postimg.cc/d0hR8HfP/telefono.png"
      );
      const blob = await response.blob();
      await navigator.clipboard.write([
        new ClipboardItem({ "image/png": blob }),
      ]);
    } catch (err) {
      console.error(err);
    }
  }

return (
  <button onClick={async () => await handleScreenshot()} id="buttonID">
    test
  </button>
);

inline function 和以下是替代方案之间存在权衡。我个人会使用后一种方法。

function handleScreenshot() {
  async function screenShot() {
    try {
      const response = await fetch(
        "https://i.postimg.cc/d0hR8HfP/telefono.png"
      );
      const blob = await response.blob();
      await navigator.clipboard.write([
        new ClipboardItem({ "image/png": blob }),
      ]);
    } catch (err) {
      console.error(err);
    }
  }
  screenShot();
}

return (
  <button onClick={handleScreenshot} id="buttonID">
    test
  </button>
);

最后，您可以返回chained promise。

Answer 2

只需在 ClipboardItem 前面添加窗口，如下所示

window.ClipboardItem(...)