小程序剖析二维码：jsQR

1.相识jsQR

jsQR是一个纯javascript脚本实现的二维码辨认库，不仅可以在欣赏器端利用，而且支持后端node.js环境。jsQR利用较为简朴，有着不错的辨认率。
2.效果图

3.二维码

4.下载jsqr包

1. npm i -d jsqr

复制代码

5.代码

1. <!-- index.wxml -->
2. <view class="container">
3.   <button bindtap="chooseImage">选择图片识别二维码</button>
4.   <canvas id="qrcodeCanvas" canvas-id="qrcodeCanvas" style="width: {{canvasWidth}}px; height: {{canvasHeight}}px"></canvas>
5. </view>
7. <button bind:tap="process">识别</button>
8. <button style="width: 100vw; margin-top: 20rpx;">识别结果：{{msg}}</button>

复制代码

• 旧canvas【canvas 2d 下】
  

1. // index.js
2. import jsQR from "jsqr";
4. Page({
5.   data: {
6.     msg: "",
7.     canvasWidth: 0,
8.     canvasHeight: 0,
9.   },
11.   chooseImage() {
12.     wx.chooseMedia({
13.       count: 1,
14.       mediaType: ["image"],
15.       sourceType: ["album", "camera"],
16.       success: (res) => {
17.         this.decodeQRCode(res.tempFiles[0].tempFilePath);
18.       },
19.       fail: (err) => {
20.         console.error("选择图片失败", err);
21.       },
22.     });
23.   },
25.   decodeQRCode(imagePath) {
26.     wx.getImageInfo({
27.       src: imagePath,
28.       success: (imageInfo) => {
29.         this.setData({
30.           canvasWidth: imageInfo.width,
31.           canvasHeight: imageInfo.height,
32.         });
34.         const canvasId = "qrcodeCanvas";
35.         const ctx = wx.createCanvasContext(canvasId);
37.         ctx.drawImage(imagePath, 0, 0, imageInfo.width, imageInfo.height);
38.         ctx.draw();
39.       },
40.       fail: (err) => {
41.         console.error("获取图片信息失败", err);
42.       },
43.     });
44.   },
46.   process() {
47.     wx.canvasGetImageData({
48.       canvasId: "qrcodeCanvas",
49.       x: 0,
50.       y: 0,
51.       width: this.data.canvasWidth,
52.       height: this.data.canvasHeight,
53.       success: (res) => {
54.         console.log(res);
55.         const decodedResult = jsQR(
56.           res.data,
57.           this.data.canvasWidth,
58.           this.data.canvasHeight,
59.           {
60.             inversionAttempts: "dontInvert",
61.           }
62.         );
64.         console.log("结果", decodedResult);
65.         if (decodedResult) {
66.           console.log(decodedResult.data); // 识别结果
67.           this.setData({
68.             msg: decodedResult.data,
69.           });
70.         } else {
71.           wx.showToast({
72.             icon: "none",
73.             title: "未识别到二维码!",
74.           });
75.         }
76.       },
77.       fail: (err) => {
78.         console.error("获取 Canvas 像素数据失败", err);
79.       },
80.     });
81.   },
82. });

复制代码

• Canvas 2d
  

1. // index.js
2. import jsQR from "jsqr";
4. Page({
5.   data: {
6.     msg: "",
7.     canvasWidth: 400,
8.     canvasHeight: 400,
9.   },
10.   chooseImage() {
11.     wx.chooseMedia({
12.       count: 1,
13.       mediaType: ["image"],
14.       sourceType: ["album", "camera"],
15.       success: (res) => {
16.         this.decodeQRCode(res.tempFiles[0].tempFilePath);
17.       },
18.       fail: (err) => {
19.         console.error("选择图片失败", err);
20.       },
21.     });
22.   },
24.   decodeQRCode(imagePath) {
25.     wx.createSelectorQuery()
26.       .select("#qrcodeCanvas") // 在 WXML 中填入的 id
27.       .fields({ node: true, size: true })
28.       .exec((res) => {
29.         // Canvas 对象
30.         this.canvas = res[0].node;
31.         const renderWidth = res[0].width;
32.         const renderHeight = res[0].height;
33.         this.ctx = this.canvas.getContext("2d");
35.         // 初始化画布大小
36.         const dpr = wx.getWindowInfo().pixelRatio;
37.         this.canvas.width = renderWidth * dpr;
38.         this.canvas.height = renderHeight * dpr;
39.         this.ctx.scale(dpr, dpr);
41.         const image = this.canvas.createImage();
42.         image.onload = () => {
43.           this.ctx.drawImage(
44.             image,
45.             0,
46.             0,
47.             this.data.canvasWidth,
48.             this.data.canvasHeight
49.           );
50.           this.process();
51.         };
52.         image.src = imagePath;
53.       });
54.   },
56.   process() {
57.     var imgData = this.ctx.getImageData(
58.       0,
59.       0,
60.       this.canvas.width,
61.       this.canvas.height
62.     );
64.     const decodedResult = jsQR(
65.       imgData.data,
66.       this.canvas.width,
67.       this.canvas.height,
68.       {
69.         inversionAttempts: "dontInvert",
70.       }
71.     );
73.     if (decodedResult) {
74.       console.log(decodedResult.data); // 识别结果
75.       this.setData({
76.         msg: decodedResult.data,
77.       });
78.     } else {
79.       wx.showToast({
80.         icon: "none",
81.         title: "未识别到二维码!",
82.       });
83.     }
84.   },
85. });

复制代码

  仅辨认优劣类二维码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。