首页 > 其他分享 >h5移动端识别二维码信息

h5移动端识别二维码信息

时间:2022-09-20 20:56:30浏览次数:62  
标签:h5 code img xhr height width 二维码 var 识别

jsqr插件 图片跨域时不允许绘制到canvas,所以先转blob在画到canvas上面就可以,如果不跨域直接画就行 function getImageBlob (url) {                     var xhr = new XMLHttpRequest();                     xhr.open('get', url, true);                     xhr.responseType = 'blob';                     xhr.onload = function () {                         if (this.status == 200) {                             var fr = new FileReader();                             fr.readAsDataURL(this.response);                             fr.onloadend = function(e) {                                 var c = document.getElementById("qrcanvas");                                 var ctx = c.getContext("2d");                                 var img = new Image();                                 img.src = e.target.result;                                 img.onload = function() {                                     c.width = img.width                                     c.height = img.height                                     ctx.drawImage(img, 0, 0, img.width, img.height);                                     var imageData = ctx.getImageData(0, 0, img.width, img.height);                                     const code = jsQR(imageData.data, imageData.width, imageData.height, {                                         inversionAttempts: "dontInvert",                                     });                                     if(code){                                         console.log("识别二维码信息:" + code.data)                                         that.queryInfo = code.data                                     }else{                                         alert("识别错误")                                     }                                 };                             }                         }                     };                     xhr.send();                 }

标签:h5,code,img,xhr,height,width,二维码,var,识别
From: https://www.cnblogs.com/guodadan/p/16712505.html

相关文章