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();

                }