h5移动端识别二维码信息
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();
}