建设交流网站,桂林市天气预报,php做网站速成,西红门网站建设公司1.了解jsQR
jsQR是一个纯javascript脚本实现的二维码识别库#xff0c;不仅可以在浏览器端使用#xff0c;而且支持后端node.js环境。jsQR使用较为简单#xff0c;有着不错的识别率。
2.效果图 3.二维码 4.下载jsqr包
npm i -d jsqr5.代码
!-- index.wxml --
不仅可以在浏览器端使用而且支持后端node.js环境。jsQR使用较为简单有着不错的识别率。
2.效果图 3.二维码 4.下载jsqr包
npm i -d jsqr5.代码
!-- index.wxml --
view classcontainerbutton bindtapchooseImage选择图片识别二维码/buttoncanvas idqrcodeCanvas canvas-idqrcodeCanvas stylewidth: {{canvasWidth}}px; height: {{canvasHeight}}px/canvas
/viewbutton bind:tapprocess识别/button
button stylewidth: 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: 未识别到二维码!,});}},
}); 仅识别黑白类二维码
