1***@qq.com
1***@qq.com
  • 发布:2019-04-22 16:21
  • 更新:2021-03-02 10:18
  • 阅读:6061

MUI 结合 HTML5+ 实现的二维码扫描功能

分类:HTML5+

一、说明
这里的布局排版不怎么直观,完整博客地址:MUI 结合 HTML5+ 实现的二维码扫描功能

        二维码的扫描在手机APP的开发中是很常见的一个需求,毕竟用的也多嘛。html5+ 提供了 Barcode模块管理条码扫描,支持常见的条码(一维码及二维码)的扫描识别功能。可调用设备的摄像头对条码图片扫描进行数据输入,解码后返回码数据及码类型。通过plus.barcode可获取条码码管理对象。

二、主要实现代码逻辑

     
2.1,扫描实现
function startRecognize() {
try {
var filter;
//自定义的扫描控件样式
var styles = {
top: '100px',
left: '0px',
width: '100%',
height: '500px',
position: 'static',
}
//扫描控件构造
scan = plus.barcode.create('bcid', filter, styles);
scan.onmarked = onmarked;
scan.onerror = onerror;
plus.webview.currentWebview().append(scan);
scan.start();
//打开关闭闪光灯处理
var flag = false;
document.getElementById("turnTheLight").addEventListener('tap', function() {
if (flag == false) {
scan.setFlash(true);
flag = true;
} else {
scan.setFlash(false);
flag = false;
}
});
} catch (e) {
alert("出现错误啦:\n" + e);
}
};

2.2 从相册中选择二维码图片
function scanPicture() {
plus.gallery.pick(function(path) {
plus.barcode.scan(path, onmarked, function(error) {
plus.nativeUI.alert("无法识别此图片");
});
}, function(err) {
plus.nativeUI.alert("Failed: " + err.message);
});
}

0 关注 分享

要回复文章请先登录注册

jos

jos

你好,我想问下这个摄像头能否拉近,类似照相机变焦拉近的效果,有些二维码距离太远想要拉近扫描,这个能否实现呢
2021-03-02 10:18
lifeng_dev

lifeng_dev

如何使用demo里的扫描二维码界面,从首页跳转到扫描二维码的时候传值,demo里面的跳转到扫描二维码好像不是openWindow方法啊,里面添加extras 参数也不行,求教
2019-07-12 16:09
yaYY

yaYY

你好 请问从相册中选取码扫描 扫完怎么清除,或者关闭当前的东西。
2019-04-25 15:17