web网页实现扫描条形码(安卓+ios适配)

web网页唤起相机拍照或者相册选择–照片识别条形码

实验了几种方法,这个稳定性比较好 , 有更好的可以推荐下

1. 安装: npm install quagga --save
2. 引入import Quagga from "quagga"; // 条形码 import QRCode from 'qrcodejs2'
3. 使用 :

   <input id="pictureD_file" class="input-code" accept="image/*" type="file"  name="pictureD_file" @change="handleFiles($event)">

   handleFiles($event) {
      this.status=true
      let files = $event.target.files[0];
      let _this = this;
      if (files) {
        let reader = new FileReader();
        reader.readAsDataURL(files);
        reader.onloadend = function () {
          let img = new Image();
          img.src = reader.result;
          _this.init(img.src); // init函数，路径为参数
        };
      }
    },
    init(src) {
      let _this = this;
      const config = {
        locator: {
          patchSize: "medium",
          halfSample: true,
        },
        numOfWorkers: navigator.hardwareConcurrency
          ? navigator.hardwareConcurrency
          : 4,
        decoder: {
          readers: [
            "code_128_reader",
            "ean_reader",
            "ean_8_reader",
            "code_39_reader",
            "code_39_vin_reader",
            "codabar_reader",
            "upc_reader",
            "upc_e_reader",
            "i2of5_reader",
          ], // List of active readers
        },
        locate: true,
        src: src,
      };
      Quagga.decodeSingle(config, function (result) {
            
        console.log(this,result);
        if (!result) {
               _this.status=false;
             alert('图片中没有条形码!'); 
        //   _this.$layer.msg("图片中没有条形码!");
  
          return false;
        }
        //识别结果
        if (result.codeResult) {
          //  this.quaCode=result.codeResult.code;
              _this.status=false;
          localStorage.setItem("barcode", result.codeResult.code);
          window.location.reload();
          console.log("图片中的条形码为：" + result.codeResult.code);
          _this.quaCode = result.codeResult.code;
      
        } else {
             _this.status=false;
               alert('未识别图片中条形码!'); 
          
         
        }
      });
    },