js和html5实现扫描条形码
来源:互联网 发布:focusky for mac中文 编辑:程序博客网 时间:2024/06/13 09:05
最近项目有个功能,需要实现扫描条形码,最开始想到的是利用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(“”)。
阅读全文
0 0
- js和html5实现扫描条形码
- Android扫描条形码实现
- IOS下使用AVFoundation实现条形码和二维码扫描
- 实用知识:实现扫描二维码和条形码功能
- Android基于Zxing实现二维码,条形码扫描和生成二维码
- ios实现条形码扫描功能
- IOS条形码扫描技术实现
- ios实现条形码扫描功能
- ios实现条形码扫描功能
- ios实现条形码扫描功能
- IOS条形码扫描技术实现
- 利用zbar实现条形码扫描
- ios实现条形码扫描功能
- ZXing和ZBar扫描二维码、扫描条形码
- IOS原声二维码条形码扫描实现
- iOS 利用 AVFoundation 实现二维码/条形码扫描
- 一个单独的条形码扫描功能实现
- mui:html5中对二维码,以及条形码扫描控件
- Hbase插入参数测试与对比
- 利用ViewDragHelper实现菜鸟裹裹的悬浮按钮效果
- 简单数据库命令记忆
- 创建MyBatis基础框架和测试
- io和newio 区别
- js和html5实现扫描条形码
- Java汉字转拼音工具类
- markdown的学习
- sge-安装-解决job提交失败的问题
- Android 关于内存泄漏的一些总结
- C语言 常用函数总结
- iOS 模仿QQ侧滑菜单和UITabBar拖动动画
- 织梦cms教程:如何优化dedecms模板做的网站?
- 【北京·签约】新东方满天星幼儿园携手中企动力布局互联网全网营销