因为需要做移动端实现扫码功能(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) {
//回调函数返回识别后的解析结果
...
});
});
},