PC端React：一键复制图片功能，从二维码到截图，趣味开发

前端

2024-01-05 19:52:41

前言

在PC端React开发中，一键复制图片功能是一种常用的交互操作，可以方便用户快速获取和分享图片信息。本文将以生成二维码为例，分享如何利用React和一些辅助工具库实现一键复制图片功能。

一、工具库准备

在开始开发之前，我们需要准备以下工具库：

qrcode.react：一个React组件库，用于生成二维码。
b64-to-blob：一个将base64编码字符串转换为Blob对象的工具库。
html2canvas：一个将HTML元素转换为canvas画布的工具库。

二、生成二维码

首先，我们使用qrcode.react组件库生成二维码。

import QRCode from "qrcode.react";

const MyComponent = () => {
  const data = "https://example.com";
  return <QRCode value={data} />;
};

这段代码会在页面上生成一个二维码，其中包含了data变量中的链接。

三、将二维码转换为base64编码字符串

接下来，我们需要将生成的二维码转换为base64编码字符串。我们可以使用html2canvas库来实现这一目的。

import html2canvas from "html2canvas";

const convertToBase64 = (element) => {
  return html2canvas(element).then((canvas) => {
    return canvas.toDataURL("image/png");
  });
};

这段代码将HTML元素（在本例中为二维码）转换为base64编码字符串。

四、将base64编码字符串转换为Blob对象

最后，我们需要将base64编码字符串转换为Blob对象。我们可以使用b64-to-blob库来实现这一目的。

import b64toBlob from "b64-to-blob";

const convertToBlob = (base64String) => {
  return b64toBlob(base64String, "image/png");
};

这段代码将base64编码字符串转换为Blob对象。

五、创建复制功能

现在，我们已经将二维码转换为Blob对象，就可以创建复制功能了。我们可以使用navigator.clipboard.write()方法来实现这一目的。

const copyToClipboard = (blob) => {
  navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob,
    }),
  ]);
};

这段代码将Blob对象复制到剪贴板中。

六、将所有步骤组合在一起

现在，我们将所有步骤组合在一起，创建一个一键复制图片的功能。

import QRCode from "qrcode.react";
import html2canvas from "html2canvas";
import b64toBlob from "b64-to-blob";

const MyComponent = () => {
  const data = "https://example.com";
  const qrcodeRef = useRef();

  const copyToClipboard = () => {
    html2canvas(qrcodeRef.current).then((canvas) => {
      const base64String = canvas.toDataURL("image/png");
      const blob = b64toBlob(base64String, "image/png");
      navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
    });
  };

  return (
    <div>
      <QRCode ref={qrcodeRef} value={data} />
      <button onClick={copyToClipboard}>复制</button>
    </div>
  );
};