html5 扫描二维码-扫描二维码（条形码）的实现----HTML5+

bendan520 html5

2023-08-29 0 2,121 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

模块：条码

Barcode模块管理条码扫描，提供常用条码（二维码和一维码）扫描识别功能html5 扫描二维码，可以调用设备的摄像头扫描条码图片进行数据输入。条码管理对象可以通过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

第一类：图像识别：

扫描图片的方式：扫描：图片的地址，以及弹回成功和失败；

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

过滤器就是左边的那些：QR、EAN13.....这是一个链表，通过这个字段可以过滤掉一些（比如：我们只识别二维码，不识别一维码，所以我们传一个二维码进去：

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+"
code:"+code+"
file:"+file;
            $("#info").html(result);
        },function(error){
            plus.nativeUI.alert('无法识别图片');
        });
    },function(err){
        plus.nativeUI.alert('Failed:'+err.message);
    });
});

第二种方法：摄像头扫描

使用摄像头扫描：对该物体进行条形码扫描；

步骤是：先初始化对象，新建一个，然后启动html5 扫描二维码，然后识别，识别完成后反弹（以上信息可以通过反弹来识别）；

第一步：new一个对象；当新的时：newplus.barcode.Barcode(id,filters,styles);

ID：初始化用户识别控件的对象ID；是一个div，一个识别二维码的盒子，它指定了一个容器；

filters：待识别的条码类型过滤器，为条码类型常量字段；就是指定一个字段，哪些可以识别，哪些不能识别；

styles：条码识别控件样式；

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

步骤2：指定反弹函数；

第三步：反弹识别以上信息；

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

具体例子：


    
    扫描二维码


    
    
    
    




mui.plusReady(function(){
    $("#startCan").bind('tap',function(){
        // 扫描二维码
        var barScan = new plus.barcode.Barcode("scanContainer");
        barScan.onmarked = function(type,code,file){
            var result = "type"+type+"
code:"+code+"
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+"
code:"+code+"
file:"+file;
                $("#info").html(result);
            },function(error){
                plus.nativeUI.alert('无法识别图片');
            });
        },function(err){
            plus.nativeUI.alert('Failed:'+err.message);
        });
    });
});