react 实现复制照片

import html2canvas from "html2canvas";
import b64toBlob from "b64-to-blob";
import copy from "copy-to-clipboard";

  const copyImg = () => {
    const image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.src = ercodeUrl;
    image.onload = function () {
      try {
        const canvas = document.getElementsByTagName("canvas");
        const ctx = canvas[0].getContext("2d");
        ctx.drawImage(image, 200, 200);
        const imgUrl = canvas[0].toDataURL("image/png");
        console.log(imgUrl);
        setUrl(imgUrl);
      } catch {
        // 可能在canvas还没画完就调用造成失败
        message.error("生成失败，请重试");
        props.onCancel();
      }
    };
    setTimeout(() => {
      html2canvas(qrCoderef.current, {
        useCORS: true,
      }).then((canvas) => {
        const imgUrl = canvas.toDataURL("image/png");
        const str = imgUrl.replace(/data:image\/png;base64,/, "");
        const file = b64toBlob(str, "image/png");
        const clipboardItemInput = new window.ClipboardItem({
          "image/png": file,
        });
        // 这里 window.navigator.clipboard在谷歌浏览器中，只有安全网络环境才能访问，https/localhost可以，http是访问不到的
        window.navigator.clipboard.write([clipboardItemInput]);
        message.success("二维码复制成功");
      });
    }, 200);
  };


      <div
        ref={qrCoderef}
        style={{
          width: "200px",
          height: "200px",
          position: "absolute",
          zIndex: -10,
        }}
      >
        {!url && (
          <div>
            <QRCodeSVG value={ercodeUrl} size={200} fgColor="#000000" />
          </div>
        )}
        {url && (
          <div>
            <img src={url} alt="" />
          </div>
        )}
      </div>