js和html5实现扫描条形码

最近项目有个功能，需要实现扫描条形码，最开始想到的是利用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(“”)。