1.了解jsQR

jsQR是一個純javascript腳本實現(xiàn)的二維碼識別庫，不僅可以在瀏覽器端使用，而且支持后端node.js環(huán)境。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;">識別結(jié)果：{{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("結(jié)果", decodedResult);if (decodedResult) {console.log(decodedResult.data); // 識別結(jié)果this.setData({msg: decodedResult.data,});} else {wx.showToast({icon: "none",title: "未識別到二維碼!",});}},fail: (err) => {console.error("獲取 Canvas 像素數(shù)據(jù)失敗", 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); // 識別結(jié)果this.setData({msg: decodedResult.data,});} else {wx.showToast({icon: "none",title: "未識別到二維碼!",});}},
});

僅識別黑白類二維碼