The implementation of scanning QR Code (barcode)----html5+

Module : Barcode

Barcode Module Management Barcode scanning, provide common barcode (two-dimensional code and one-dimensional code) scanning recognition function, can call the device's camera to the barcode image scanning for data input. Barcode Code Management Objects can be obtained through Plus.barcode.

Use the scene : Scan code attention, scanning payment, scan login, all kinds of scanning, together is information, everything can be two-dimensional code;

Call mode :

1, image recognition: This image is a two-dimensional code, and then identify the picture;

2, Camera Scan: Scan the QR code on the phone to pay, etc.;

commonly used constants : QR (two-dimensional code), EAN13: one-dimensional code;

QR: Barcode type constant, QR code, value is 0ean13: bar code type constant, EAN one-dimensional barcode code standard version, the value is 1ean8: bar code type constant, ena one-dimensional barcode simple version, the value is 2AZTEC: bar code type constant, Aztec two-dimensional code, The value is 3DATAMATRIX: bar code type constant, Data matrix QR Code, the value is 4UPCA: bar code type constant, UPC code standard version, the value is 5UPCE: bar code type constant, UPC code shortened version, the value is 6CODABAR: bar code type constant, Codabar code, the value is 7code39: bar code type constant, Code39 one-dimensional barcode, the value is 8code93: bar code type constant, Code93 code, the value is 9code128: bar code type constant, Code128 code, value is 10ITF: bar code type constant, ITF code, Value 11MAXICODE: Barcode type constant, Maxicode QR code, value is 12pdf417: Barcode type constant, PDF 417 code, value is 13RSS14: bar code type constant, RSS 14 combination code, the value is 14RSSEXPANDED: Barcode type constant, extended RSS combination code, Value 15

The first type: image recognition :

How to scan a picture: Scan: The address of the image, and the successful callback and failure callback;

Plus.barcode.scan (path,successcb,errorcb,filters);

Filters is the right side of these: Qr,ean13 ..... This is an array, which can be filtered out by this array (for example: we only recognize that the QR code does not recognize the one-dimensional code, it passes a QR in:

var filter = [Plus.barcode.qr,plus.barcode.aztec];p Lus.barcode.scan (path,successcb,errorcb,filter);) 

Specific examples :

//how to identify the local QR code$ ("#startCanOne"). Bind (' tap ',function() {Plus.gallery.pick (function() {Plus.barcode.scan (Path,function(type,code,file) {varresult = "type" +type+ "<br/>code:" +code+ "<br/>file:" +file; $("#info"). HTML (result); },function(Error) {Plus.nativeUI.alert (' Image not recognized ');    }); },function(Err) {Plus.nativeUI.alert (' Failed: ' +err.message); });});

The second type: Camera Scan

The camera scan is used: barcode this object;

The first step is to initialize the object, new one, then start, then identify, and then make a callback after the recognition is complete (the callback can identify the information inside);

The first step: New one object; NEW: New Plus.barcode.Barcode (Id,filters,styles);

ID: Object ID The initialization of the user-aware control; a Div, a box that identifies a two-dimensional code, that specifies a container;

Filters: The barcode type filter to be recognized, is an array of bar code type constants, that is, to specify an array, what can be identified, what is not recognized;

Styles: barcode recognition control style;

String FrameColor: The color of the scan box, string scanbarcolor: Scan bar color, string background: Barcode recognition control background color;

Step two: Specify a callback function;

The third step: callback to identify the information inside;

$ ("#startCan"). Bind (' tap ',function(){    //Scan Two-dimensional code    varBarscan =NewPlus.barcode.Barcode ("Scancontainer"); Barscan.onmarked=function(type,code,file) {varresult = "type" +type+ "<br/>code:" +code+ "<br/>file:" +file; $("#info"). HTML (result);    }; //Barscan.start (); Start scanningBarscan.start ({conserve:true, FileName: "_doc/barcode/"});//You can configure the path saved after the scan});

Specific examples :

<Headerclass= "Mui-bar Mui-bar-nav">    <aclass= "Mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>    <H1class= "Mui-title">Scan two-dimensional code</H1></Header><Divclass= "Mui-content mui-content-padded">    <Buttontype= "button"class= "Mui-btn mui-btn-blue mui-btn-block"ID= "Startcan">Start scanning</Button>    <Buttontype= "button"class= "Mui-btn mui-btn-blue mui-btn-block"ID= "Startcanone">Identify local</Button>    <DivID= "Scancontainer"style= "width:300px; height:300px; border:1px solid red; margin:0px auto;"></Div>    <DivID= "Info"></Div></Div><Scriptsrc= ' Http://libs.baidu.com/jquery/1.8.3/jquery.min.js '></Script><Scriptsrc= "Js/mui.min.js"></Script><Scripttype= "Text/javascript">Mui.plusready (function(){    $("#startCan"). Bind ('Tap',function(){        //Scan Two-dimensional code        varBarscan= NewPlus.barcode.Barcode ("Scancontainer"); Barscan.onmarked= function(type,code,file) {varresult= "type"+type+"<br/>code:"+Code+"<br/>file:"+file; $("#info"). HTML (result);        }; //Barscan.start (); Start scanningBarscan.start ({conserve:true, FileName:"_doc/barcode/"});//You can configure the path saved after the scan    }); //how to identify the local QR code    $("#startCanOne"). Bind ('Tap',function() {Plus.gallery.pick (function() {Plus.barcode.scan (Path,function(type,code,file) {varresult= "type"+type+"<br/>code:"+Code+"<br/>file:"+file; $("#info"). HTML (result); },function(Error) {Plus.nativeUI.alert ('Image not recognized');        }); },function(Err) {Plus.nativeUI.alert ('Failed:'+err.message);    }); });});</Script>

The implementation of scanning QR Code (barcode)----html5+