Barcode模塊管理條碼掃描識別(一維碼和二維碼)

支持常見的一維碼(如EAN13碼)及二維碼(如QR碼), 通過調(diào)用設(shè)備的攝像頭對條碼進(jìn)行掃描識別, 掃描到條碼后進(jìn)行解碼并返回碼數(shù)據(jù)內(nèi)容及碼類型

文章目錄

• Barcode模塊管理條碼掃描識別(一維碼和二維碼)
• • 一.常量
  • 二.方法
  • • 2.1 scan: 掃碼識別圖片中的條碼
    • • 2.1.1參數(shù)
    • 2.2 create: 創(chuàng)建掃碼識別控件對象
    • • 2.2.1參數(shù)
    • 2.3 getBarcodeById: 查找掃碼識別控件對象
    • • 2.3.1 參數(shù)
    • 2.4 Barcode 掃碼識別控件對象
    • • 2.4.1 方法
      • 2.4.2 事件
      • 2.4.3 BarcodeStyles Barcode掃碼控件樣式

一.常量

QR: QR二維碼, 數(shù)值為0

EAN13: ENA條形碼標(biāo)準(zhǔn)版, 數(shù)值為1

EAN8: ENA條形碼簡版, 數(shù)值為2

AZTEC: Aztec二維碼, 數(shù)值為3

DATAMATRIX: Data Matrix二維碼, 數(shù)值為4

UPCA: UPC條形碼標(biāo)準(zhǔn)版, 數(shù)值為5

UPCE: UPC條形碼縮短版, 數(shù)值為6

CODABAR: Codabar條形碼, 數(shù)值為7

CODE39: Code3條形碼, 數(shù)值為8

CODE93: Code93條形碼, 數(shù)值為9

CODE128: CODE128條形碼, 數(shù)值為10

ITF: ITF條形碼, 數(shù)值為11

MAXICODE: MaxiCode二維碼, 數(shù)值為12

PDF417: PDF417二維條碼, 數(shù)值為13

RSS14: RSS 14條形碼組合碼, 數(shù)值為14

RSSEXPANDED: 擴(kuò)展式RSS條形組合碼, 數(shù)值為15

二.方法

2.1 scan: 掃碼識別圖片中的條碼

輸入圖片文件進(jìn)行掃碼識別, 成功掃描到條碼(一維碼或二維碼)后通過successCallback回調(diào)返回, 失敗則通過errorCallback回調(diào)返回

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

2.1.1參數(shù)

path: (String) 要掃碼的圖片路徑

successCB: 掃碼識別成功回調(diào)函數(shù)

errorCB: (可選)掃碼識別失敗回調(diào)函數(shù)

fiters:(array)(可選)條碼類型過濾器(設(shè)置支持的條碼類型越多, 掃描識別速度可能將會降低)

autoDecodeCharset: (Boolean) (必選) 自動解碼字符集. 默認(rèn)值false

• false - 將二維碼解碼數(shù)據(jù)當(dāng)做utf-8字符集處理, 對于非utf-8字符集數(shù)據(jù)可能會出現(xiàn)亂碼
• true - 自動檢測二維碼解碼數(shù)據(jù), 兼容處理utf-8、GBK、Big5編碼格式的字符

// 從圖片中掃碼識別 function scanImg() {plus.barcode.scan( '_www/barcode.png', function(type,result) {console.log("Scan success:("+type+")"+result);}, function(e){console.log("Scan failed: "+JSON.stringify(e));} ); }

2.2 create: 創(chuàng)建掃碼識別控件對象

創(chuàng)建掃碼識別控件并不會顯示在頁面中, 需要電泳plus.webview.Webview窗口對象的append方法將其添加到Webview窗口中才能顯示. 需要設(shè)置styles參數(shù)的top/left/width/height屬性指定掃碼識別控件的位置及大小, 否則可能無法正確顯示

2.2.1參數(shù)

id:(String)掃碼識別空間的標(biāo)識

可用于通過plus.barcode.getBarcodeById()方法查找已經(jīng)創(chuàng)建的掃碼識別控件對象

filters: (Array[Number])(可選)條碼類型過濾器

styles:(BarcodeStyles)(可選)掃碼識別控件樣式

autoDecodeCharset:(Boolean)(必選)自動解碼字符集

<template><view></view> </template><script>export default {data() {return {barcode: null, //創(chuàng)建掃一掃對象result: '', //掃描結(jié)果flash: false,};},onShow() {// 頁面展示時，重新啟動掃描檢測if (this.barcode) {this.barcode.start()}},onLoad() {plus.navigator.setFullscreen(true); //全屏let currentWebview = this.$scope.$getAppWebview();console.error(currentWebview)this.createBarcode(currentWebview)},methods: {createBarcode(currentWebview) {if (!this.barcode) {this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {top: `0px`,left: '0px',height: `100%`,width: '100%',position: 'absolute',background: '#FFCC00',frameColor: '#FFCC33',scanbarColor: '#FFCC33',});console.log(this.barcode)this.barcode.onmarked = this.onmarked;this.barcode.setFlash(this.flash);//注意掃碼區(qū)域需為正方形，否則影響掃碼識別率 currentWebview.append(this.barcode);}this.barcode.start()},// 掃碼成功回調(diào)onmarked(type, result) {console.log('條碼類型：' + type);console.log('條碼內(nèi)容：' + result);uni.navigateBack({delta: 1})// 業(yè)務(wù)代碼// 核對掃描結(jié)果// 判斷是否是正確的格式// 不正確則跳轉(zhuǎn)到 錯誤頁面}}} </script><style lang="scss"></style>

2.3 getBarcodeById: 查找掃碼識別控件對象

根據(jù)指定的id(標(biāo)識)查找掃碼控件對象, 可跨頁面進(jìn)行查找

2.3.1 參數(shù)

id: (String)(必選) 掃碼識別控制的標(biāo)識.

var barcode = null; // 創(chuàng)建掃碼控件 function createBarcode() {if(!barcode){barcode = plus.barcode.create('barcode', [plus.barcode.QR], {top:'100px',left:'0px',width: '100%',height: '500px',position: 'static'});barcode.onmarked = function(type, result){console.log('Success: type='+type+', result='+result);};plus.webview.currentWebview().append(barcode);}barcode.start(); } // 查找掃碼控件 function findBarcode() {var b = plus.barcode.getBarcodeById('barcode');if(b){console.log('find success!');} else {console.log('find failed!');} }

2.4 Barcode 掃碼識別控件對象

可通過plus.barcode.create創(chuàng)建, 也可通過new plus.barcode.Barcode構(gòu)造(僅在5+APP中使用)創(chuàng)建. 掃碼識別控件將使用設(shè)備的攝像頭預(yù)覽掃描內(nèi)容, 在控件中顯示掃描基準(zhǔn)框等用戶交互元素.

2.4.1 方法

cancel: 取消掃碼識別

結(jié)束對攝像頭捕獲圖片數(shù)據(jù)進(jìn)行條碼識別操作, 同時關(guān)閉攝像頭的視頻捕捉. 結(jié)束后可調(diào)用start方法重新開始識別.

close: 關(guān)閉條碼識別控件

釋放控件占用系統(tǒng)資源, 調(diào)用close方法后控件對象將不可使用.

setFlash: 操作閃光燈

void obj.setFlash(open);

• 說明

設(shè)置掃碼識別控件在掃碼時是否開啟攝像頭的閃光燈, 默認(rèn)值為不開啟閃光燈

• 參數(shù)

open: (Boolean)是否開啟閃光燈

可取值true或false, true表示打開閃光燈, false表示關(guān)閉閃光燈

setStyle: 設(shè)置掃碼識別控件的樣式

void bc.setStyle(styles);

• 說明

用于動態(tài)更新掃碼識別控件的顯示樣式參數(shù)

• 參數(shù)

styles: (BarcodeStyles)要更新的樣式參數(shù)

• 實例

var barcode = null; // 創(chuàng)建Barcode掃碼控件 function createBarcode() {if(!barcode){barcode = plus.barcode.create('barcode', [plus.barcode.QR], {top:'100px',left:'0px',width: '100%',height: '500px',position: 'static'});plus.webview.currentWebview().append(barcode);}barcode.start(); } // 更新Barcode掃碼控件 function updateBarcode() {barcode.setStyle({top:'200px' // 調(diào)整掃碼控件的位置}); }

start: 開始掃碼識別

• 說明:

  調(diào)用設(shè)備的攝像頭在控件中預(yù)覽, 并獲取捕獲數(shù)據(jù)進(jìn)行掃碼識別, 當(dāng)識別出條形碼(二維碼)數(shù)據(jù)時觸發(fā)onmarked事件返回掃碼結(jié)果.

• 參數(shù):

  optons: (BarcodeOptions)(可選)掃碼識別的參數(shù)

  通過此參數(shù)可設(shè)置是否獲取掃碼成功的條碼截圖等.

2.4.2 事件

onmarked: 掃碼識別成功事件

void bc.onmarked = function(type,code,file){}

• 說明: BarcodeSuccessCallback類型

  掃碼識別控件成功識別到條碼(二維碼)數(shù)據(jù)時觸發(fā)的事件, 并返回掃碼結(jié)果.

onerror: 掃碼識別錯誤事件

• 說明: BarcodeErrorCallback類型

  掃碼識別控件在掃碼過成功發(fā)生錯誤時觸發(fā)的事件, 并返回錯誤信息

2.4.3 BarcodeStyles Barcode掃碼控件樣式

interface plus.barcode.BarcodeStyles{attribute String background;attribute String frameColor;attribute String scanbarColor;attribute String top;attribure String left;attribure String width;attribure String height;attribure String position; }

說明:

設(shè)置Barcode掃碼控件的樣式, 如掃碼框、掃碼條的顏色等

屬性:

• background: (String類型)條碼識別控件背景顏色, 默認(rèn)紅色
• frameColor: 掃碼框顏色, 默認(rèn)紅色
• scanbarColor: 掃碼條顏色, 默認(rèn)紅色
• top: Barcode掃碼控件左上角的垂直偏移量
• left: Barcode掃碼控件左上角的水平偏移量
• width: Barcode掃碼控件的寬度
• height: Barcode掃碼控件的高度
• position: Barcode掃碼控件在Webview窗口的布局模式

總結(jié)

以上是生活随笔為你收集整理的Barcode模块管理条码扫描识别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。