jsQR：一个纯粹的 javascript 二维码阅读库。 此库接收原始图像，并将定位、提取和解析中找到的任何二维码。

1.安装：

yarn add jsQR

2.使用：

// ES6 import
import jsQR from "jsqr";

// CommonJS require
const jsQR = require("jsqr");

const code = jsQR(imageData, width, height, options?);
if (code) {
  console.log("Found QR code", code);
}

3.参数说明：

*   `imageData` - 格式为 `[r0, g0, b0, a0, r1, g1, b1, a1, ...]` 的 `Uint8ClampedArray` 的 rgba 像素值。

因此，这个数组的长度应该是 `4 * width * height`。 此数据与 [`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) 接口的形式相同

*   `width` - 要解码的图像的宽度。
*   `height` - 要解码的图像的高度。
*   `options` (可选) - 其他选项
*   `inversionAttempts` - (`attemptBoth` (default), `dontInvert`, `onlyInvert`, or `invertFirst`) - Should jsQR attempt to invert the
image to find QR codes with white modules on black backgrounds instead of the black modules on white background. This option defaults to attemptBoth for backwards compatibility but causes a ~50% performance hit, and will probably be default to dontInvert in future versions.

4.返回值：如果一个二维码能够被解码，库将返回一个具有以下键的对象。

binaryData - Uint8ClampedArray - 二维码的原始字节。
data - 二维码数据的字符串版本。
location - 有描述二维码关键点的键的对象。每个键都是形式x:数字，y:数字的点。具有以下位置的点。
角 - topRightCorner/topLeftCorner/bottomRightCorner/bottomLeftCorner;
定位点位置 - topRightFinderPattern/topLeftFinderPattern/bottomLeftFinderPattern
也可能返回 bottomRightAlignmentPattern， 前提是存在并且可以定位该点。

关于imageData如何获取？

import React, { useEffect, useState } from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import jsQR from "jsqr";

type IdentifyQrCodeProps = {
  onChange: (value: string) => void;
}
const IdentifyQrCode: React.FC<IdentifyQrCodeProps> = (props) => {
  return (
    <div>
      <canvas id="canvas" style={{
        position:'fixed',
        left:'-99999px',
        top:'-99999px',
      }}></canvas>
      <Upload showUploadList={false}
        maxCount={1}
        beforeUpload={file => {
          const isImg = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
          if (!isImg) {
            message.error(`请上传图片`);
          }
          return false;
        }}
        onChange={info => {
          const file = info.fileList[0];  // 获取文件
          const canvas = document.getElementById("canvas"); // 获取canvas
          const URL = window.URL || window.webkitURL; // 兼容
          const url = URL.createObjectURL(file.originFileObj as Blob);   // 获取文件的临时路径(antd upload组件上传的对象为{originFileObj:File},对象中的originFileObj才是file对象)
          const img = new Image();  // 创建图片对象
          img.onload = function () {
            // 根据图片大小设置canvas大小
            canvas.width = img.width;
            canvas.height = img.height;
            // 释放对象URL所占用的内存
            URL.revokeObjectURL(img.src);
            // 获取canvas
            const context = (canvas as any).getContext("2d");
            // canvas绘制图片
            context.drawImage(this, 0, 0, img.width, img.height);
            // 通过canvas获取imageData
            const imageData = context.getImageData(0, 0, img.width, img.height);
            // jsQR识别
            const code = jsQR(imageData.data, imageData.width, imageData.height);
            console.log("Found QR code", code);
            props.onChange(code!.data);
          };
          img.src = url;  // 给img标签设置src属性
        }}>
        <Button icon={<UploadOutlined />}>上传二维码</Button>
      </Upload >
    </div>
  );
};

export default IdentifyQrCode;