柚子快報邀請碼778899分享：小程序解析二維碼：jsQR
柚子快報邀請碼778899分享：小程序解析二維碼：jsQR
1.了解jsQR
jsQR是一個純javascript腳本實現(xiàn)的二維碼識別庫，不僅可以在瀏覽器端使用，而且支持后端node.js環(huán)境。jsQR使用較為簡單，有著不錯的識別率。
2.效果圖
3.二維碼
4.下載jsqr包
npm i -d jsqr
5.代碼
舊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 像素數(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); // 識別結果
this.setData({
msg: decodedResult.data,
});
} else {
wx.showToast({
icon: "none",
title: "未識別到二維碼!",
});
}
},
});
僅識別黑白類二維碼
柚子快報邀請碼778899分享：小程序解析二維碼：jsQR
推薦閱讀
本文內容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Unit808單元購
