扫描二维码的实现(barcode) ---- HTML5+
模块:barcode
Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。
使用场景:扫码关注,扫描支付,扫描登录,各种扫描,一起都是信息,一切都可以是二维码;
调用方式:
1,图片识别:这个图片是一个二维码,然后识别这个图片;
2,摄像头扫描:扫描手机上的二维码进行支付等;
常用的常量:QR(二维码),EAN13:一维码;
QR: 条码类型常量,QR二维码,数值为0
EAN13: 条码类型常量,EAN一维条形码码标准版,数值为1
EAN8: 条码类型常量,ENA一维条形码简版,数值为2
AZTEC: 条码类型常量,Aztec二维码,数值为3
DATAMATRIX: 条码类型常量,Data Matrix二维码,数值为4
UPCA: 条码类型常量,UPC码标准版,数值为5
UPCE: 条码类型常量,UPC码缩短版,数值为6
CODABAR: 条码类型常量,Codabar码,数值为7
CODE39: 条码类型常量,Code39一维条形码,数值为8
CODE93: 条码类型常量,Code93码,数值为9
CODE128: 条码类型常量,Code128码,数值为10
ITF: 条码类型常量,ITF码,数值为11
MAXICODE: 条码类型常量,MaxiCode二维码,数值为12
PDF417: 条码类型常量,PDF 417码,数值为13
RSS14: 条码类型常量,RSS 14组合码,数值为14
RSSEXPANDED: 条码类型常量,扩展式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+的更多相关文章
- ionic 扫描二维码 Barcode Scanner、QR Scanner、ZBar
1.简介 ionic 官方给我们提供了三个扫描二维码条形码插件,分别为: Barcode Scanner 样式好看,类似支付宝的扫描框.速度稍微比最后一个慢几百毫秒,主要问题是 Android 部分手 ...
- 使用vue做移动app时,调用摄像头扫描二维码
现在前端技术发展飞快,前端都能做app了,那么项目中,也会遇到调用安卓手机基层的一些功能,比如调用摄像头,完成扫描二维码功能 下面我就为大家讲解一下,我在项目中调用这功能的过程. 首先我们需要一个中间 ...
- Ionic2学习笔记(10):扫描二维码
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016 说明: 在本文发表的时候(2016-06-1 ...
- iOS使用Zbar扫描二维码
iOS使用Zbar扫描二维码 标签(空格分隔):二维码扫描 iOS Zbar64位 正文: 首先下载一个支持64位系统的ZbarSDK的包,保存在了我的云盘里,地址:ZbarSDK 把文件拖到工程里面 ...
- 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析
转自:http://www.cnblogs.com/fengyun99/p/3541249.html 关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描 ...
- Android实例-实现扫描二维码并生成二维码(XE8+小米5)
相关资料: 第三方资料太大没法写在博文上,请下载CSDN的程序包. 程序包下载: http://download.csdn.net/detail/zhujianqiangqq/9657186 注意事项 ...
- 实现zbar扫描二维码的时候就把照片存储出来的办法
业务场景 当实现二维码扫描的时候(用的扫码库是zbar),有时候需要悄悄的整个扫描的照片存储下来,(charles有部分变态业务就是这样)就是说给扫描的图片照个全景照片. 那么代码如何实现 ...
- Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是 ...
- [置顶]
xamarin android使用zxing扫描二维码
好久没写了,这片文章篇幅不长,概述一下在xamarin android中用 ZXing.Net.Mobile库扫描二维码读取url的示例.扫码支付,扫码登录,App上各种各样的扫码,好像没个扫码的就有 ...
随机推荐
- Android actionbar 笔记
ActionBar是一种新増的导航栏功能,在Android 3.0之后加入到系统的API当中,它标识了用户当前操作界面的位置,并提供了额外的用户动作.界面导航等功能. 参考链接 https://dev ...
- 第二百九十七节,python操作redis缓存-List类型,可以理解为列表
python操作redis缓存-List类型,可以理解为列表,是可以有重复元素的列表 List操作,redis中的List在在内存中按照一个name对应一个List来存储.如图: lpush(name ...
- mysql_query error:Commands out of sync;you can't run this command now
MYSQL_REST *result没有释放, 用mysql_free_result(result)即可.
- 观察者模式/ java实现附代码 /
/注:场景和例子引用github上的设计模式.传送门:https://github.com/iluwatar/java-design-patterns/tree/master/observer 场景: ...
- 用C语言显示汉字的演示程序
汉字是方块字,宽高相等的汉字库在嵌入式领域有着广泛的应用,且其解析也相对来说是比较简单的.汉字在汉字库中的索引一般会遵循GB2312/GBK编码规则,GB2312/GBK规定汉字编码由2个字节组成,其 ...
- motion的移植和使用
说明: motion主页:http://www.lavrsen.dk/foswiki/bin/view/Motion motion下载地址:http://sourceforge.net/project ...
- C++測量一段代码的执行时时间
在电脑里发现的一段C++代码,尽管自己不做C++开发了.还是贴出来,给须要的人 LARGE_INTEGER BegainTime ; LARGE_INTEGER EndTime ; LARGE_INT ...
- Java调用FTP实例
package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...
- Oracle查询优化--排序
--普通排序 SELECT * FROM emp ORDER BY sal DESC; --使用列序排序 DESC; --组合排序 DESC; --translate函数,参数分别用A.B.C表示 S ...
- Webpack vs Gulp(转载)
理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...