1. 程式人生 > >HTML5+規範:barcode(條碼掃描)

HTML5+規範:barcode(條碼掃描)

   Barcode模組管理條碼掃描,提供常見的條碼(二維碼及一維碼)的掃描識別功能,可呼叫裝置的攝像頭對條碼圖片掃描進行資料輸入。通過plus.barcode可獲取條碼碼管理物件。

1、常量

  (1)、QR: 條碼型別常量,QR二維碼,數值為0,1994年由日本Denso-Wave公司發明,QR來自英文Quick Response的縮寫,即快速反應的意思,源自發明者希望QR碼可讓其內容快速被解碼。 目前使用最廣泛的二維碼。

  (2)、EAN13: 條碼型別常量,EAN一維條形碼碼標準版,數值為1,國際物品編碼協會在全球推廣應用的商品條碼,是由13位數字組成。 目前使用最廣泛的一維條形碼。

  (3)、EAN8: 條碼型別常量,ENA一維條形碼簡版,數值為2,國際物品編碼協會在全球推廣應用的商品條碼,是由8位數字組成。

  (4)、AZTEC: 條碼型別常量,Aztec二維碼,數值為3,Andrew Longacre發明於1995年,該程式碼是用於國際出版。最小的Aztec碼符號編碼13個數字或12個英文字母。最大的Aztec碼符號編碼3832數字或3067英文字母或1914位元組的資料。

  (5)、DATAMATRIX: 條碼型別常量,Data Matrix二維碼,數值為4,Data Matrix原名Data code,由美國國際資料公司(International Data Matrix, 簡稱IDMatrix)於1989年發明。可編碼字元集包括全部的ASCII字元及擴充ASCII字元,容量可包含2235個英文數字資料、1556個8位元資料,3116個數字資料。由於Data Matrix二維條碼只需要讀取資料的20%即可精確辨讀,因此很適合應用在條碼容易受損的場所。

  (6)、UPCA: 條碼型別常量,UPC碼標準版,數值為5,UPC碼是美國統一程式碼委員會制定的一種商品用條碼,主要用於美國和加拿大地區,常在美國進口的商品上可以看到。UPC碼標準版由12位數字構成,故其字碼集為數字0~9。

  (7)、UPCE: 條碼型別常量,UPC碼縮短版,數值為6,UPC碼是美國統一程式碼委員會制定的一種商品用條碼,主要用於美國和加拿大地區,常在美國進口的商品上可以看到。UPC碼縮短版由8位數字構成,故其字碼集為數字0~9。

  (8)、CODABAR: 條碼型別常量,Codabar碼,數值為7,Codabar碼最初是為零售價格標籤系統而研製開發的。1975年,National Retail Merchants Association(NRMA)選擇了其它符號型別作為標準後,Codabar開始在多個方面用於非零售應用領域,如圖書館、貨運和醫藥業。

  (9)、CODE39: 條碼型別常量,Code39一維條形碼,數值為8,Code 39碼是Intermec公司於1975年推出的一維條碼, 39碼是一種可供使用者雙向掃瞄的分散式條碼,也就是說相臨兩資料碼之間,39碼必須包含一個不具任何意義的空白(或細白,其邏輯值為0),且 39碼具有支援文數字的能力,編碼規則簡單、誤位元速率低、所能表示字元個數多等特點,39碼在各個領域有著極為廣泛的應用。

  (10)、CODE93: 條碼型別常量,Code93碼,數值為9,Code 93碼的條碼符號是由Intermec公司於1982年設計的 提供更高的密度和資料安全增強code39 。它是一個字母,長度可變符號。程式碼93主要用於由加拿大郵政編碼補充提供的資料。

  (11)、CODE128: 條碼型別常量,Code128碼,數值為10,CODE128碼是1981年引入的一種高密度條碼,CODE128 碼可表示從 ASCII 0 到ASCII 127 共128個字元,故稱128碼。CODE128碼是廣泛應用在企業內部管理、生產流程、物流控制系統方面的條碼碼制,由於其優良的特性在管理資訊系統的設計中被廣泛使用。

  (12)、ITF: 條碼型別常量,ITF碼,數值為11,ITF條碼,又稱交叉二五條碼,由14位數字字元代表組成。主要用於運輸包裝,是印刷條件較差,不允許印刷EAN-13和UPC-A條碼時應選用的一種條碼。

  (13)、MAXICODE: 條碼型別常量,MaxiCode二維碼,數值為12,1996年時,美國自動辨識協會(AIMUSA)制定統一的符號規格,稱為Maxicode二維條碼,也有人稱USS-Maxicode二維條碼(Uniform Symbology Specification-Maxicode)。

  (14)、PDF417: 條碼型別常量,PDF 417碼,數值為13,PDF417條碼是由美國SYMBOL公司發明的,PDF(Portable Data File)意思是“便攜資料檔案”。組成條碼的每一個條碼字元由4個條和4個空共17個模組構成,故稱為PDF417條碼。PDF417條碼最大的優勢在於其龐大的資料容量和極強的糾錯能力。

  (15)、RSS14: 條碼型別常量,RSS 14組合碼,數值為14,RSS條碼是有國際物品編碼協會EAN和美國統一程式碼委員會UCC開發的RSS(Reduced Space Symbology)條碼符號。它是一種一維碼和二維碼的組合碼。和其它線性條碼相比,RSS系列碼制具有更高的密度,因為它可以表示更多的字元。

  (16)、RSSEXPANDED: 條碼型別常量,擴充套件式RSS組合碼,數值為15,RSS條碼是有國際物品編碼協會EAN和美國統一程式碼委員會UCC開發的RSS(Reduced Space Symbology)條碼符號。它是一種一維碼和二維碼的組合碼。和其它線性條碼相比,RSS系列碼制具有更高的密度,因為它可以表示更多的字元。擴充套件式RSS碼是長度可以變化的線性碼制,能夠對74個數字字元或41個字母字元的AI單元資料傳資料進行編碼。

2、方法

scan: 通過圖片掃描條碼資料

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

說明:直接通過圖片掃描條碼資料,成功掃描到條碼資料後通過successCallback回撥返回,失敗則通過errorCallback回撥返回。

引數:

path: ( String ) 必選 掃描的圖片的地址,圖片的地址必須是本地檔案地址,如URLType型別(如以"_www"、"_doc"、"_documents"、"_downloads"開頭的相對URL路徑)或者系統絕對路徑。

successCB: ( BarcodeSuccessCallback ) 必選 掃描條碼碼圖片成功的回撥函式,返回條碼資料

errorCB: ( BarcodeErrorCallback ) 可選 掃描條碼圖片失敗的回撥函式,返回錯誤資訊

filters: ( Array ) 可選 要識別的條碼型別過濾器,為條碼型別常量陣列,條碼識別引擎可支援多種二維碼及一維碼型別,預設情況支援QR、EAN13、EAN8三種類型。 可通過此引數設定需要支援的更多條碼型別(注意:設定支援的條碼型別越多,掃描識別效率將會降低)。

返回值:void : 無

平臺支援:Android - 2.2+ (支援)、iOS - 4.3+ (支援)

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API
function onPlusReady() {
  var e = document.getElementById("scan");
  e.removeAttribute( "disabled" );
}
// 從圖片中掃描
function scanImg() {
plus.barcode.scan( '_www/barcode.png', function (type,result) {
alert( "Scan success:("+type+")"+result );
}, function (error) {
alert( error.message );
} );
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body >
<input id="scan" type='button' disabled="disabled" onclick='scanImg()' value='掃描圖片'></input>
</body>
</html>

3、物件

3.1、Barcode: 條碼掃描識別控制元件物件

interface plus.barcode.Barcode {

// Methods

function void start( options );

function void cancel();

function void close();

function void setFlash( open );

// Events

function void onmarked();

function void onerror();

}

說明:Barcode物件表示條碼識別控制元件物件,在視窗中顯示條碼識別控制元件,使用此物件可自定義條碼識別介面。

1)、構造:Barcode.constructor(id,filters,styles): 建立Barcode物件

          var bc = new plus.barcode.Barcode( id, filters, styles );

說明:建立Barcode物件,並指定Barcode物件的在介面中關聯div或object標籤的id號。

引數:

  id: ( String ) 必選 條碼識別控制元件在Webview視窗的DOM節點的id值,為了定義條碼識別控制元件在Webview視窗中的位置,需要指定控制元件定位標籤(div或objecct)的id號,系統將根據此id號來確定條碼識別控制元件的大小及位置。

  filters: ( Array[ Number ] ) 可選 要識別的條碼型別過濾器,為條碼型別常量陣列。條碼識別引擎可支援多種二維碼及一維碼型別,預設情況支援QREAN13EAN8三種類型。 可通過此引數設定需要支援的更多條碼型別(注意:設定支援的條碼型別越多,掃描識別效率將會降低)。

  styles: ( BarcodeStyles ) 可選 條碼識別控制元件樣式,可定義條碼識別控制元件的樣式,如掃描框、掃描條的顏色等。

返回值:Barcode :

示例:

// 建立支援預設條碼型別的識別控制元件
var bc = new plus.barcode.Barcode( "barcode" );
// 建立支援
var filter = [plus.barcode.QR,plus.barcode.AZTEC];
var bc2 = new plus.barcode.Barcode( "barcode", filter );


2)、方法

(1)、start: 開始條碼識別

          void bc.start( options );

說明:開始呼叫系統攝像頭獲取圖片資料進行掃描識別,當識別出條碼資料時通過onmarked回撥函式返回。

引數:optons: ( BarcodeOptions ) 可選 條碼識別的引數,通過此引數可設定是否獲取掃描成功的條碼截圖資料等。

返回值:void : 無

(2)、cancel: 結束條碼識別

           void bc.cancel();

說明:結束對攝像頭獲取圖片資料進行條碼識別操作,同時關閉攝像頭的視訊捕獲。 結束後可呼叫start方法重新開始識別。

返回值:void : 無

(3)、close: 關閉條碼識別控制元件

            void bc.close();

說明:釋放控制元件佔用系統資源,呼叫close方法後控制元件物件將不可使用。

返回值:void : 無

(4)、setFlash: 是否開啟閃光燈

       void obj.setFlash( open );

說明:設定條碼掃描控制元件在掃描時是否開啟攝像頭的閃光燈,預設值為不開啟閃光燈。

引數:open: ( Boolean ) 必選 是否開啟閃光燈,可取值true或false,true表示開啟閃光燈,false表示關閉閃光燈。

返回值:void : 無

3)、事件

(1)、onmarked: 條碼識別成功事件

void obj.onmarked = function ( type, code, file ) {
// loaded code
}

說明:BarcodeSuccessCallback 型別,掃描控制元件識別到有效的條碼資料時觸發的成功事件,並返回掃描結果

(2)、onerror: 條碼識別錯誤事件

void obj.onerror = function ( error ) {
// loaded code
}

說明:BarcodeErrorCallback 型別,描控制元件識別過程中發生錯誤時觸發的失敗事件,並返回錯誤資訊。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式
document.addEventListener( "plusready", onPlusReady, false );
// 擴充套件API載入完畢,現在可以正常呼叫擴充套件API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
var text = '未知: ';
switch(type){
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert( text+result );
}
function startRecognize() {
// 建立支援預設條碼型別的識別控制元件
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
}
function startScan() {
scan.start();
}
function cancelScan() {
scan.cancel();
}
function setFlash() {
scan.setFlash();
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
#bcid {
background:#0F0;
height:480px;
width:360px;
}
</style>
</head>
<body >
<input type='button' onclick='startRecognize()' value='建立掃描控制元件' />
<input type='button' onclick='startScan()' value='開始掃描' />
<input type='button' onclick='cancelScan()' value='取消掃描' />
<input type='button' onclick='setFlash()' value='開啟閃光燈' />
<div id= "bcid"></div>
<input type='text' id='text'/>
</body>
</html>


3.2、BarcodeStyles: 條碼掃描控制元件樣式引數

interface plus.barcode.BarcodeStyles {

attribute String frameColor;

attribute String scanbarColor;

attribute String background;

}

說明:設定條碼識別控制元件的樣式,如掃描框、掃描條的顏色等。

屬性:

   frameColor: (String 型別 )掃描框顏色,顏色值支援(參考CSS顏色規範):顏色名稱(參考CSS Color Names)/十六進位制值/rgb值/rgba值,預設值為紅色。

   scanbarColor: (String 型別 )掃描條顏色,顏色值支援(參考CSS顏色規範):顏色名稱(參考CSS Color Names)/十六進位制值/rgb值/rgba值,預設值為紅色。

   background: (String 型別 )條碼識別控制元件背景顏色,顏色值支援(參考CSS顏色規範):顏色名稱(參考CSS Color Names)/十六進位制值/rgb值,預設值為紅色。

3.3、BarcodeOptions: 條碼識別控制元件掃描引數

interface plus.barcode.BarcodeOptions {

attribute Boolean conserve;

attribute String filename;

}

說明:設定條碼識別控制元件掃描條碼的引數,如是否儲存掃描成功時的截圖等。

屬性:

   conserve: (Boolean 型別 )是否儲存成功掃描到的條碼資料時的截圖,如果設定為true則在成功掃描到條碼資料時將圖片儲存,並通過onmarked回撥函式的file引數返回儲存檔案的路徑。預設值為false,不儲存圖片。

   filename: (String 型別 )儲存成功掃描到的條碼資料時的圖片路徑,可通過此引數設定儲存截圖的路徑或名稱,如果設定圖片檔名稱則必須指定檔案的字尾名(必須是.png),否則認為是指定目錄,檔名稱則自動生成。

4、回撥方法

4.1、BarcodeSuccessCallback: 條碼識別成功的回撥函式

void BarcodeSuccessCallback ( type, code, file ) {

// Barcode success code

}

說明:當獲取條碼識別成功時的回撥函式,用於返回識別成功的條碼資料。

引數:

type: ( Number ) 必選 識別到的條碼型別,Number型別的值,與Barcode物件定義的條碼型別常量一致。

code: ( String ) 必選 識別到的條碼資料,從條碼圖片中掃描出的資料內容,字串採用UTF8編碼格式。

file: ( String ) 可選 識別到的條碼圖片檔案路徑,識別到的條碼資料圖片,為png格式檔案,為設定為不儲存圖片,則返回undefined。

返回值:void : 無

4.2、BarcodeErrorCallback: 條碼識別錯誤的回撥函式

void BarcodeErrorCallback( error ) {

// Handle error

}

引數:error: ( DOMException ) 必選 條碼識別的錯誤資訊

返回值:void : 無