解析二维码的三种方式

效果预览

方式一jsqr

  // jsQR识别
  var fileJsqrId = document.getElementById('upload-jsqr');
  fileJsqrId.addEventListener('change', function (e) {
     const files = e.target.files;
     const file = files[0];
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.addEventListener('load', (event) => {
                var img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    var c = document.getElementById('canvas-jsqr');
                    var ctx = c.getContext('2d');
                    c.setAttribute('width', img.width);
                    c.setAttribute('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) {
                        document.getElementById('result-jsqr').value = code.data;
                    } else {
                        alert('ERROR！识别错误！')
                    }
                }
            })
        })

方式二 qrcode

   // qrcode识别
 var fileQrcodeId = document.getElementById('upload-qrcode');
 fileQrcodeId.onchange = function (e) {
     const files = e.target.files;
     const file = files[0];
     qrcode.decode(getObjectURL(file, 'canvas-qrcode'));
     qrcode.callback = function (result) {
        document.getElementById('result-qrcode').value = result;
   }
}

方式三qrcode-decoder

 // qrcode decoder 识别
  var qrcodedecoder = document.getElementById('upload-decoder');
  qrcodedecoder.onchange = function (e) {
       const files = e.target.files;
       const file = files[0];
       var qr = new QrcodeDecoder();
       qr.decodeFromImage(getObjectURL(file, 'canvas-decoder')).then((res) => {
                document.getElementById('result-decoder').value = res.data;
            });
        }

完整代码：Github地址