Vue H5页面实现拍照解析二维码功能

因为需要做移动端实现扫码功能（app和h5都可用），H5不能调用手机扫码功能。所以采用先拍照获取二维码文件流再解析二维码数据。
需要以下3个js文件支持,网上可以下载到：(引用顺序如下)

上面js我做了些修改，方便把识别的结果通过回调函数返回出来。

1.qrcode.js

(function($) {
  var Qrcode = function(tempBtn, backfun) {
    var _this_ = this;
    var isWeiboWebView = /__weibo__/.test(navigator.userAgent);

    if (isWeiboWebView) {
      if (window.WeiboJSBridge) {
        _this_.bridgeReady(tempBtn, backfun);
      } else {
        document.addEventListener("WeiboJSBridgeReady", function() {
          _this_.bridgeReady(tempBtn, backfun);
        });
      }
    } else {
      _this_.nativeReady(tempBtn, backfun);
    }
  };

  Qrcode.prototype = {
    nativeReady: function(tempBtn, backfun) {
      $("[node-type=jsbridge]", tempBtn).on("click", function(e) {
        e.stopPropagation();
      });

      $(tempBtn).bind("click", function(e) {
        $(this)
          .find("input[node-type=jsbridge]")
          .trigger("click");
      });

      $(tempBtn).bind("change", { foo: backfun }, this.getImgFile);
    },
    bridgeReady: function(tempBtn, backfun) {
      $(tempBtn).bind("click", { foo: backfun }, this.weiBoBridge);
    },
    weiBoBridge: function(event) {
      window.WeiboJSBridge.invoke("scanQRCode", null, function(params) {
        //得到扫码的结果
        event.data.foo(params);
        // $(".result-qrcode").append(params.result + "<br/>");
      });
    },
    getImgFile: function(event) {
      var _this_ = this;
      var inputDom = $(this).find("input[node-type=jsbridge]");
      var imgFile = inputDom[0].files;
      var oFile = imgFile[0];
      var oFReader = new FileReader();
      var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

      if (imgFile.length === 0) {
        return;
      }

      if (!rFilter.test(oFile.type)) {
        alert("选择正确的图片格式!");
        return;
      }

      oFReader.onload = function(oFREvent) {
        qrcode.decode(oFREvent.target.result);
        qrcode.callback = function(data) {
          //得到扫码的结果
          event.data.foo(data);
          //   $(".result-qrcode").append(data + "<br/>");
        };
      };

      oFReader.readAsDataURL(oFile);
    },
    destory: function() {
      $(tempBtn).off("click");
    }
  };

  Qrcode.init = function(tempBtn, backfun) {
    var _this_ = this;

    tempBtn.each(function() {
      new _this_($(this), backfun);
    });
  };
  window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery);

2.qrcode.lib.min.js，我把定义在Array上的remove方法注释了。因为和我的高德地图冲突了。注释后扫码功能暂时没发现异常,没有高德地图的可以忽略这一步

function URShift(a, b) {
  if (a >= 0) {
    return a >> b;
  } else {
    return (a >> b) + (2 << ~b);
  }
}
// Array.prototype.remove = function(c, b) {
//   var a = this.slice((b || c) + 1 || this.length);
//   this.length = c < 0 ? this.length + c : c;
//   return this.push.apply(this, a);
// };
var MIN_SKIP = 3;
var MAX_MODULES = 57;
var INTEGER_MATH_SHIFT = 8;
var CENTER_QUORUM = 2;

html代码

<div
            @click="handleqrcode"
            class="qr-btn"
            style="position:absolute;width:100%;height:100%;opacity:0;"
            node-type="qr-btn"
          >
            <input
              node-type="jsbridge"
              type="file"
              accept="image/*"
              capture="camera"
              name="myPhoto"
            />
          </div>

js代码

//扫码
    handleqrcode() {
      let that = this;
      $(function() {
        Qrcode.init($("[node-type=qr-btn]"), function(data) {
          //回调函数返回识别后的解析结果
          ...
        });
      });
    },