最近项目有个功能，需要实现扫描条形码，最开始想到的是利用html5，发现html5有个getUserMedia属性，可以调用手机的摄像头，但是有个问题，网页中的摄像无法拉大光圈，焦距不好控制，近距离无法聚焦，拍出来的条形码模糊不清无法解析。
继续搜索，发现了一个js的扫描条形码插件，quagga.js
网址为：https://serratus.github.io/quaggaJS/
此插件提供了三种方式实现扫码的功能，一种就是上文提出的getUserMedia，还有一种是传入一个image文件，可以使用文件的相对路径和绝对路径，还可以使用base64的编码格式，如果图片清晰的话，可以直接解析。还有一种是通过file文件上传控件上传图片进行解析。
Quagga.decodeSingle({
decoder: {
readers: ["code_128_reader"] // List of active readers
},
locate: true, // try to locate the barcode in the image
src: 'http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%9D%A1%E5%BD%A2%E7%A0%81&step_word=&hs=0&pn=2&spn=0&di=106533245501&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=823405878%2C3443523694&os=568412607%2C3049456600&simid=4194346878%2C651564224&adpicid=0&lpn=0&ln=1958&fr=&fmq=1498811412680_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fc2cec3fdfc0392452c51063a8694a4c27d1e251b.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fzit1w5_z%26e3Bkwt17_z%26e3Bv54AzdH3Fq7jfpt5gAzdH3Fcd8dadlcm_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0'//'data:image/jpg;base64,'+base64Data // or 'data:image/jpg;base64,' + data
}, function(result){
if(result) {
if(result.codeResult) {
console.log("result", result.codeResult.code);
}
}else{
alert("未扫描成功!");
}
});我采用的是第三种方式，因为现在file文件上传控件可以直接拉起手机摄像头，可以调节焦距进行聚焦，拍摄完成的图片上传之后转成base64位编码格式，然后用Quagga.decodeSingle扫码完成。此处还利用了一个插件，进行图片的压缩，以下是代码
$.each($('input:file'), function(index, item){
$(item).localResizeIMG({
width : 800,
quality : 1,
before : function(){
},
success : function(result){
var imgData = result.clearBase64;
Quagga.decodeSingle({
decoder: {
readers: ["code_128_reader"] // List of active readers
},
locate: true, // try to locate the barcode in the image
src: 'data:image/jpg;base64,'+imgData
}, function(result){
if(result) {
if(result.codeResult) {
alert(result.codeResult.code);
} else {
alert("未扫码成功，请重新扫码!");
}
}else{
alert("挂了!");
}
});
});
});
});
* 获得base64
* @param {Object} obj
* @param {Number} [obj.width] 图片需要压缩的宽度，高度会跟随调整
* @param {Number} [obj.quality=0.8] 压缩质量，不压缩为1
* @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file
* @param {Function} obj.success(obj) 处理后函数
* @example
*
*/
$.fn.localResizeIMG = function(obj) {
this.on('change', function() {
var file = this.files[0];
var fileName = file.name;
var suffix = fileName.substring(fileName.lastIndexOf('.')+1).toUpperCase();
if(suffix != 'JPG' && suffix != 'PNG' && suffix != 'JPEG'){
alert("请上传图片类型文件！");
return;
}
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);
// 执行前函数
if ($.isFunction(obj.before)) {
obj.before(this, blob, file);
};
_create(blob, file);
//this.value = ''; // 清空临时数据
});
/**
* 生成base64
* @param blob 通过file获得的二进制
*/
function _create(blob) {
var img = new Image();
img.src = blob;
img.onload = function() {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);
/**
* 生成base64
* 兼容修复移动设备需要引入mobileBUGFix.js
*/
var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
// 修复IOS
if (navigator.userAgent.match(/iphone/i)) {
var mpImg = new MegaPixImage(img);
mpImg.render(canvas, {
maxWidth: w,
maxHeight: h,
quality: obj.quality || 0.8
});
base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
}
// 修复android
if (navigator.userAgent.match(/Android/i)) {
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
}
// 生成结果
var result = {
base64: base64,
clearBase64: base64.substr(base64.indexOf(',') + 1)
};
// 执行后函数
obj.success(result);
};
}
};适配iphone还有一个js文件，LocalResizeIMG.js可以去我上传的资源库里找。
此处有个小问题需要注意一下，部分浏览器的file框会因为二次上传的文件是同一个，触发不了change事件，此时可以在扫描完成后在js中将file框的value值清空。$(“file”).val(“”)。