获取二维码内容及内容生成二维码

在近期项目中，需要实现 获取二维码的内容及将已知的链接生成二维码，对此通过以下代码来实现。

获取二维码内容

1.安装插件 npm install jsqr --save；

2.插件的使用

import jsQR from 'jsqr';

const code = jsQR(imageData, width, height);

参数	说明
imageData	一个Uint8ClampedArrayRGBA像素值的形式[r0, g0, b0, a0, r1, g1, b1, a1, ...]。因此这个数组的长度应该是4 * width * height. 该数据与接口的形式相同 ImageData 通常也由 节点模块 返回以用于读取图像。
width	解码图片宽度
height	解码图片高度

3.完整代码

    function upload(file) {
        // file 为上传二维码得到的文件
        const canvas: any = document.getElementById("canvas"); // 获取canvas
        const URL = window.URL || window.webkitURL; // 兼容
        const url = URL.createObjectURL(file as Blob);   // 获取文件的临时路径(antd upload组件上传的对象为{originFileObj:File},对象中的originFileObj才是file对象)
        const img = new Image();  // 创建图片对象
        img.width = 200;
        img.height = 200;
        img.onload = () => {
          // 根据图片大小设置canvas大小
          canvas.width = 200;
          canvas.height = 200;
          // 释放对象URL所占用的内存
          URL.revokeObjectURL(img.src);
          // 获取canvas
          const context = (canvas as any).getContext("2d");
          // canvas绘制图片
          context.drawImage(this, 0, 0, 200, 200);
          // 通过canvas获取imageData
          const imageData = context.getImageData(0, 0, 200, 200);
          // jsQR识别
          const code = jsQR(imageData.data, imageData.width, imageData.height);
          console.log("QR code", code); // code.data 为二维码内容
        };
    }

将内容生成对应的二维码

1.安装插件 npm install qrcodejs2-fix;

2.插件的使用

import QRCode from 'qrcodejs2-fix';

const generateCode = () => {
  new QRCode(container, {
    text: '',
    width：256,
    height: 256,
    ...
  });
};

参数	说明	默认值
container	容器(二维码容器，比如div)	-
text	需要编码的内容	-
width	图片宽度	256
height	图片高度	256
colorDark	前景色	#000000
colorLight	背景色	#ffffff
correctLevel	容错级别，可设置为：QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H	256
typeNumber	二维码类型(1-40，输入 0 以自动检测)	256

3.完整代码

const generateCode = () => {
  new QRCode(document.getElementById("container"), {
    text: 'https://www.baidu.com',
    width: 200,
    height: 200
  });
};