小程序解析二维码：jsQR

1.了解jsQR

jsQR是一个纯javascript脚本实现的二维码识别库，不仅可以在浏览器端使用，而且支持后端node.js环境。jsQR使用较为简单，有着不错的识别率。

2.效果图

3.二维码

4.下载jsqr包

npm i -d jsqr

5.代码

<!-- index.wxml -->
<view class="container">
  <button bindtap="chooseImage">选择图片识别二维码</button>
  <canvas id="qrcodeCanvas" canvas-id="qrcodeCanvas" style="width: {{canvasWidth}}px; height: {{canvasHeight}}px"></canvas>
</view>

<button bind:tap="process">识别</button>
<button style="width: 100vw; margin-top: 20rpx;">识别结果：{{msg}}</button>

• 旧canvas【canvas 2d 下】

// index.js
import jsQR from "jsqr";

Page({
  data: {
    msg: "",
    canvasWidth: 0,
    canvasHeight: 0,
  },

  chooseImage() {
    wx.chooseMedia({
      count: 1,
      mediaType: ["image"],
      sourceType: ["album", "camera"],
      success: (res) => {
        this.decodeQRCode(res.tempFiles[0].tempFilePath);
      },
      fail: (err) => {
        console.error("选择图片失败", err);
      },
    });
  },

  decodeQRCode(imagePath) {
    wx.getImageInfo({
      src: imagePath,
      success: (imageInfo) => {
        this.setData({
          canvasWidth: imageInfo.width,
          canvasHeight: imageInfo.height,
        });

        const canvasId = "qrcodeCanvas";
        const ctx = wx.createCanvasContext(canvasId);

        ctx.drawImage(imagePath, 0, 0, imageInfo.width, imageInfo.height);
        ctx.draw();
      },
      fail: (err) => {
        console.error("获取图片信息失败", err);
      },
    });
  },

  process() {
    wx.canvasGetImageData({
      canvasId: "qrcodeCanvas",
      x: 0,
      y: 0,
      width: this.data.canvasWidth,
      height: this.data.canvasHeight,
      success: (res) => {
        console.log(res);
        const decodedResult = jsQR(
          res.data,
          this.data.canvasWidth,
          this.data.canvasHeight,
          {
            inversionAttempts: "dontInvert",
          }
        );

        console.log("结果", decodedResult);
        if (decodedResult) {
          console.log(decodedResult.data); // 识别结果
          this.setData({
            msg: decodedResult.data,
          });
        } else {
          wx.showToast({
            icon: "none",
            title: "未识别到二维码!",
          });
        }
      },
      fail: (err) => {
        console.error("获取 Canvas 像素数据失败", err);
      },
    });
  },
});

• Canvas 2d

// index.js
import jsQR from "jsqr";

Page({
  data: {
    msg: "",
    canvasWidth: 400,
    canvasHeight: 400,
  },
  chooseImage() {
    wx.chooseMedia({
      count: 1,
      mediaType: ["image"],
      sourceType: ["album", "camera"],
      success: (res) => {
        this.decodeQRCode(res.tempFiles[0].tempFilePath);
      },
      fail: (err) => {
        console.error("选择图片失败", err);
      },
    });
  },

  decodeQRCode(imagePath) {
    wx.createSelectorQuery()
      .select("#qrcodeCanvas") // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        this.canvas = res[0].node;
        const renderWidth = res[0].width;
        const renderHeight = res[0].height;
        this.ctx = this.canvas.getContext("2d");

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio;
        this.canvas.width = renderWidth * dpr;
        this.canvas.height = renderHeight * dpr;
        this.ctx.scale(dpr, dpr);

        const image = this.canvas.createImage();
        image.onload = () => {
          this.ctx.drawImage(
            image,
            0,
            0,
            this.data.canvasWidth,
            this.data.canvasHeight
          );
          this.process();
        };
        image.src = imagePath;
      });
  },

  process() {
    var imgData = this.ctx.getImageData(
      0,
      0,
      this.canvas.width,
      this.canvas.height
    );

    const decodedResult = jsQR(
      imgData.data,
      this.canvas.width,
      this.canvas.height,
      {
        inversionAttempts: "dontInvert",
      }
    );

    if (decodedResult) {
      console.log(decodedResult.data); // 识别结果
      this.setData({
        msg: decodedResult.data,
      });
    } else {
      wx.showToast({
        icon: "none",
        title: "未识别到二维码!",
      });
    }
  },
});

仅识别黑白类二维码