分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

扫描二维码的实现(barcode) ---- HTML5+

发布时间:2023-09-06 01:25责任编辑:胡小海关键词:HTML二维码

模块:barcode

Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

使用场景:扫码关注,扫描支付,扫描登录,各种扫描,一起都是信息,一切都可以是二维码;

调用方式

1,图片识别:这个图片是一个二维码,然后识别这个图片;

2,摄像头扫描:扫描手机上的二维码进行支付等;

常用的常量:QR(二维码),EAN13:一维码;

QR: 条码类型常量,QR二维码,数值为0EAN13: 条码类型常量,EAN一维条形码码标准版,数值为1EAN8: 条码类型常量,ENA一维条形码简版,数值为2AZTEC: 条码类型常量,Aztec二维码,数值为3DATAMATRIX: 条码类型常量,Data Matrix二维码,数值为4UPCA: 条码类型常量,UPC码标准版,数值为5UPCE: 条码类型常量,UPC码缩短版,数值为6CODABAR: 条码类型常量,Codabar码,数值为7CODE39: 条码类型常量,Code39一维条形码,数值为8CODE93: 条码类型常量,Code93码,数值为9CODE128: 条码类型常量,Code128码,数值为10ITF: 条码类型常量,ITF码,数值为11MAXICODE: 条码类型常量,MaxiCode二维码,数值为12PDF417: 条码类型常量,PDF 417码,数值为13RSS14: 条码类型常量,RSS 14组合码,数值为14RSSEXPANDED: 条码类型常量,扩展式RSS组合码,数值为15

第一种:图片识别

扫描图片的方法:scan:传图片的地址,和成功回调和失败回调;

plus.barcode.scan(path,successCB,errorCB,filters);

filters就是右边的这些:QR,EAN13.....这个是一个数组,通过这个数组就可以过滤掉一些(例如:我们只识别二维码不识别一维码,就传递一个QR进去:

var filter = [plus.barcode.QR,plus.barcode.AZTEC];plus.barcode.scan(path,successCB,errorCB,filter);)

具体示例

// 如何识别本地的二维码$("#startCanOne").bind(‘tap‘,function(){ ???plus.gallery.pick(function(){ ???????plus.barcode.scan(Path,function(type,code,file){ ???????????var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file; ???????????$("#info").html(result); ???????},function(error){ ???????????plus.nativeUI.alert(‘无法识别图片‘); ???????}); ???},function(err){ ???????plus.nativeUI.alert(‘Failed:‘+err.message); ???});});

第二种:摄像头扫描 

摄像头扫描用的就是:Barcode这个对象;

步骤就是:首先是初始化对象,new一个,然后start一下,然后进行识别,识别完成之后进行回调(回调就可以识别里面的信息);

第一步:new一个对象;new的时候:new plus.barcode.Barcode(id,filters,styles);

ID:对象ID用户识别控件的初始化;就是一个div,一个识别二维码的一个框,就是指定一个容器;

filters:要识别的条形码类型过滤器,为条码类型常量数组;就是指定一个数组,能识别什么,不能识别什么;

styles:条码识别控件样式;

string frameColor:扫描框的颜色;string scanbarColor:扫描条颜色;string background:条码识别控件背景颜色;

第二步:指定一个回调函数;

第三步:回调识别里面的信息;

$("#startCan").bind(‘tap‘,function(){ ???// 扫描二维码 ???var barScan = new plus.barcode.Barcode("scanContainer"); ???barScan.onmarked = function(type,code,file){ ???????var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file; ???????$("#info").html(result); ???}; ???//barScan.start(); 开始扫描 ???barScan.start({conserve:true,filename:"_doc/barcode/"});// 可以配置扫描后保存的路径 ???????});

具体示例

<header class="mui-bar mui-bar-nav"> ???<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> ???<h1 class="mui-title">扫描二维码</h1></header><div class="mui-content mui-content-padded"> ???<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="startCan">开始扫描</button> ???<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="startCanOne">识别本地</button> ???<div id="scanContainer" style="width:300px; height:300px; border:1px solid red; margin:0px auto;"></div> ???<div id="info"></div></div><script src=‘http://libs.baidu.com/jquery/1.8.3/jquery.min.js‘></script><script src="js/mui.min.js"></script><script type="text/javascript">mui.plusReady(function(){ ???$("#startCan").bind(‘tap‘,function(){ ???????// 扫描二维码 ???????var barScan = new plus.barcode.Barcode("scanContainer"); ???????barScan.onmarked = function(type,code,file){ ???????????var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file; ???????????$("#info").html(result); ???????}; ???????//barScan.start(); 开始扫描 ???????barScan.start({conserve:true,filename:"_doc/barcode/"});// 可以配置扫描后保存的路径 ???????????}); ???// 如何识别本地的二维码 ???$("#startCanOne").bind(‘tap‘,function(){ ???????plus.gallery.pick(function(){ ???????????plus.barcode.scan(Path,function(type,code,file){ ???????????????var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file; ???????????????$("#info").html(result); ???????????},function(error){ ???????????????plus.nativeUI.alert(‘无法识别图片‘); ???????????}); ???????},function(err){ ???????????plus.nativeUI.alert(‘Failed:‘+err.message); ???????}); ???});});</script>

扫描二维码的实现(barcode) ---- HTML5+

原文地址:http://www.cnblogs.com/e0yu/p/7843505.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved