需求明确
开启常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。
知识点明确
Barcode模块:plus.barcode,提供开启摄像头扫描功能。 Gallery模块:plus.gallery,提供读取相册二维码图片功能。 效果展示:
实现步骤
创建条码扫描识别控件实例对象,涉及到Barcode模块,具体参数设置可参考5+ API Barcode在plusReady事件触发之后创建一个Barcode实例对象,此对象提供四个方法:start: 开始条码识别cancel: 结束条码识别close: 关闭条码识别控件setFlash: 是否开启闪光灯和两个事件:onmarked: 条码识别成功事件onerror: 条码识别错误事件
function plusReady() { if(ws || !window.plus || !domready) { return; } // 获取窗口对象 ws = plus.webview.currentWebview(); // 开始扫描 ws.addEventListener('show', function() { scan = new plus.barcode.Barcode('bcid'); // 定义识别成功事件 scan.onmarked = onmarked; // 定义开始条码识别 scan.start({ conserve: true, // 是否保存成功扫描到的条码数据时的截图 filename: '_doc/barcode/' // 保存成功扫描到的条码数据时的图片路径 }); }, false); // 显示页面并关闭等待框 ws.show('pop-in');}
// 二维码扫描成功
function onmarked(type, result, file) { switch(type) { case plus.barcode.QR: type = 'QR'; break; case plus.barcode.EAN13: type = 'EAN13'; break; case plus.barcode.EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } result = result.replace(/\n/g, ''); plus.nativeUI.alert('扫描结果:' + JSON.stringify(result), function() { console.log('扫描成功') }, "helloW2A", "OK"); back();}
2.从相册中选择图片识别,涉及到Gallery模块,具体参数设置可参考5+ API:Gallery
// 从相册中选择二维码图片** function scanPicture() { plus.gallery.pick(function(path) { plus.barcode.scan(path, onmarked, function(error) { plus.nativeUI.alert('无法识别此图片'); }); }, function(err) { console.log('Failed: ' + err.message); });}
3.DOM结构参考
...载入中...