模块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+的更多相关文章

  1. ionic 扫描二维码 Barcode Scanner、QR Scanner、ZBar

    1.简介 ionic 官方给我们提供了三个扫描二维码条形码插件,分别为: Barcode Scanner 样式好看,类似支付宝的扫描框.速度稍微比最后一个慢几百毫秒,主要问题是 Android 部分手 ...

  2. 使用vue做移动app时,调用摄像头扫描二维码

    现在前端技术发展飞快,前端都能做app了,那么项目中,也会遇到调用安卓手机基层的一些功能,比如调用摄像头,完成扫描二维码功能 下面我就为大家讲解一下,我在项目中调用这功能的过程. 首先我们需要一个中间 ...

  3. Ionic2学习笔记(10):扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  4. iOS使用Zbar扫描二维码

    iOS使用Zbar扫描二维码 标签(空格分隔):二维码扫描 iOS Zbar64位 正文: 首先下载一个支持64位系统的ZbarSDK的包,保存在了我的云盘里,地址:ZbarSDK 把文件拖到工程里面 ...

  5. 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析

    转自:http://www.cnblogs.com/fengyun99/p/3541249.html 关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描 ...

  6. Android实例-实现扫描二维码并生成二维码(XE8+小米5)

    相关资料: 第三方资料太大没法写在博文上,请下载CSDN的程序包. 程序包下载: http://download.csdn.net/detail/zhujianqiangqq/9657186 注意事项 ...

  7. 实现zbar扫描二维码的时候就把照片存储出来的办法

    业务场景       当实现二维码扫描的时候(用的扫码库是zbar),有时候需要悄悄的整个扫描的照片存储下来,(charles有部分变态业务就是这样)就是说给扫描的图片照个全景照片. 那么代码如何实现 ...

  8. Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码

    详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是 ...

  9. [置顶] xamarin android使用zxing扫描二维码

    好久没写了,这片文章篇幅不长,概述一下在xamarin android中用 ZXing.Net.Mobile库扫描二维码读取url的示例.扫码支付,扫码登录,App上各种各样的扫码,好像没个扫码的就有 ...

随机推荐

  1. EasyUI-datagrid中load,reload,loadData方法的区别

    EasyUI比较常用,其中的datagrid比较复杂,它有其中有load,reload,loadData这三个方法,它们都有相同的功能,都是加载数据的,但又有区别. load方法,比如我已经定义一个d ...

  2. android抓包工具——使用fiddler4在安卓手机抓包

    Fiddler是一款非常流行并且实用的http抓包工具,它的原理是在本机开启了一个http的代理服务器,然后它会转发所有的http请求和响应,因此,它比一般的firebug或者是chrome自带的抓包 ...

  3. tensorflow中slim模块api介绍

    tensorflow中slim模块api介绍 翻译 2017年08月29日 20:13:35   http://blog.csdn.net/guvcolie/article/details/77686 ...

  4. 【转】C#调用WebService实例和开发

    一.基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.是 ...

  5. 如果参数是指针,且仅作输入用,则应在类型前加 const,以防止该 指针在函数体内被意外修改

    如果参数是指针,且仅作输入用,则应在类型前加 const,以防止该 指针在函数体内被意外修改. #include <iostream> /* run this program using ...

  6. 转:Python操作SQLServer示例

    注:此文也是转载,2018年1月发现此文阅读量过万,略感不安.当时只是为了自己存档学习,未粘此文的原始连接.如有侵权,通过即删除,敬请谅解! 从网上找的,估计原文是:Python操作SQLServer ...

  7. Java精选笔记_JSTL(JSP标准标签库)

    JSTL(JSP标准标签库) JSTL入门 JavaServer Pages Standard Tag Library:JSP标准标签库 在JSP中可以通过Java代码来获取信息,但是过多的Java代 ...

  8. css揭秘读书笔记

    currentColor属性让hr和段落相同的颜色: div { color: red; } hr { background: currentColor; /* 一定要设置高度*/ height: 0 ...

  9. GIS-009-Cesium 使用

    //加载ArcGIS 发布的地图服务MapServervar url='http://Jason:6080/arcgis/rest/services/SampleWorldCities/MapServ ...

  10. GIS-001-gdal软件下载地址

    http://www.gisinternals.com/ http://download.gisinternals.com/sdk/downloads/release-1600-x64-gdal-1- ...