Barcode模块管理条码扫描识别

ゝ一世哀愁。 2023-01-17 04:58 461阅读 0赞

# Barcode模块管理条码扫描识别(一维码和二维码) #

> 支持常见的一维码(如EAN13码)及二维码(如QR码), 通过调用设备的摄像头对条码进行扫描识别, 扫描到条码后进行解码并返回码数据内容及码类型

### 文章目录 ###

*  Barcode模块管理条码扫描识别(一维码和二维码)
 *   *  一.常量
     *  二.方法
     *   *  2.1 scan: 扫码识别图片中的条码
         *   *  2.1.1参数
         *  2.2 create: 创建扫码识别控件对象
         *   *  2.2.1参数
         *  2.3 getBarcodeById: 查找扫码识别控件对象
         *   *  2.3.1 参数
         *  2.4 Barcode 扫码识别控件对象
         *   *  2.4.1 方法
             *  2.4.2 事件
             *  2.4.3 BarcodeStyles Barcode扫码控件样式

## 一.常量 ##

1.  QR: QR二维码, 数值为0
2.  EAN13: ENA条形码标准版, 数值为1
3.  EAN8: ENA条形码简版, 数值为2
4.  AZTEC: Aztec二维码, 数值为3
5.  DATAMATRIX: Data Matrix二维码, 数值为4
6.  UPCA: UPC条形码标准版, 数值为5
7.  UPCE: UPC条形码缩短版, 数值为6
8.  CODABAR: Codabar条形码, 数值为7
9.  CODE39: Code3条形码, 数值为8
10. CODE93: Code93条形码, 数值为9
11. CODE128: CODE128条形码, 数值为10
12. ITF: ITF条形码, 数值为11
13. MAXICODE: MaxiCode二维码, 数值为12
14. PDF417: PDF417二维条码, 数值为13
15. RSS14: RSS 14条形码组合码, 数值为14
16. RSSEXPANDED: 扩展式RSS条形组合码, 数值为15

## 二.方法 ##

### 2.1 scan: 扫码识别图片中的条码 ###

> 输入图片文件进行扫码识别, 成功扫描到条码(一维码或二维码)后通过successCallback回调返回, 失败则通过errorCallback回调返回

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

#### 2.1.1参数 ####

1.  path: (String) 要扫码的图片路径
2.  successCB: 扫码识别成功回调函数
3.  errorCB: (可选)扫码识别失败回调函数
4.  fiters:(array)(可选)条码类型过滤器(设置支持的条码类型越多, 扫描识别速度可能将会降低)
5.  autoDecodeCharset: (Boolean) (必选) 自动解码字符集. 默认值false
    
     *  false - 将二维码解码数据当做utf-8字符集处理, 对于非utf-8字符集数据可能会出现乱码
     *  true - 自动检测二维码解码数据, 兼容处理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: 创建扫码识别控件对象 ###

> 创建扫码识别控件并不会显示在页面中, 需要电泳plus.webview.Webview窗口对象的append方法将其添加到Webview窗口中才能显示. 需要设置styles参数的top/left/width/height属性指定扫码识别控件的位置及大小, 否则可能无法正确显示

#### 2.2.1参数 ####

1.  id:(String)扫码识别空间的标识
    
    可用于通过plus.barcode.getBarcodeById()方法查找已经创建的扫码识别控件对象
2.  filters: (Array\[Number\])(可选)条码类型过滤器
3.  styles:(BarcodeStyles)(可选)扫码识别控件样式
4.  autoDecodeCharset:(Boolean)(必选)自动解码字符集

<template>
    	<view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				barcode: null, //创建扫一扫对象
    				result: '', //扫描结果
    				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);
    					//注意扫码区域需为正方形，否则影响扫码识别率  
    					currentWebview.append(this.barcode);
    				}
    				this.barcode.start()
    			},
    			// 扫码成功回调
    			onmarked(type, result) {
    				console.log('条码类型：' + type);
    				console.log('条码内容：' + result);
    				uni.navigateBack({
    					delta: 1
    				})
    				// 业务代码
    				// 核对扫描结果
    				// 判断是否是正确的格式
    				// 不正确则跳转到 错误页面
    
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    
    </style>

### 2.3 getBarcodeById: 查找扫码识别控件对象 ###

> 根据指定的id(标识)查找扫码控件对象, 可跨页面进行查找

#### 2.3.1 参数 ####

1.  id: (String)(必选) 扫码识别控制的标识.

### 2.4 Barcode 扫码识别控件对象 ###

> 可通过plus.barcode.create创建, 也可通过new plus.barcode.Barcode构造(仅在5+APP中使用)创建. 扫码识别控件将使用设备的摄像头预览扫描内容, 在控件中显示扫描基准框等用户交互元素.

#### 2.4.1 方法 ####

1.  cancel: 取消扫码识别
    
    结束对摄像头捕获图片数据进行条码识别操作, 同时关闭摄像头的视频捕捉. 结束后可调用start方法重新开始识别.
2.  close: 关闭条码识别控件
    
    释放控件占用系统资源, 调用close方法后控件对象将不可使用.
3.  setFlash: 操作闪光灯
    
        void obj.setFlash(open);
    
     *  说明
    
    设置扫码识别控件在扫码时是否开启摄像头的闪光灯, 默认值为不开启闪光灯
    
     *  参数
    
    open: (Boolean)是否开启闪光灯
    
    可取值true或false, true表示打开闪光灯, false表示关闭闪光灯
4.  setStyle: 设置扫码识别控件的样式
    
        void bc.setStyle(styles);
    
     *  说明
    
    用于动态更新扫码识别控件的显示样式参数
    
     *  参数
    
    styles: (BarcodeStyles)要更新的样式参数
    
     *  实例
    
        var barcode = null;
        // 创建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'		// 调整扫码控件的位置
        	});
        }
5.  start: 开始扫码识别
    
     *  说明:
        
        调用设备的摄像头在控件中预览, 并获取捕获数据进行扫码识别, 当识别出条形码(二维码)数据时触发onmarked事件返回扫码结果.
     *  参数:
        
        optons: (BarcodeOptions)(可选)扫码识别的参数
        
        通过此参数可设置是否获取扫码成功的条码截图等.

#### 2.4.2 事件 ####

1.  onmarked: 扫码识别成功事件
    
        void bc.onmarked = function(type,code,file){ 
            
        }
    
     *  说明: BarcodeSuccessCallback类型
        
        扫码识别控件成功识别到条码(二维码)数据时触发的事件, 并返回扫码结果.
2.  onerror: 扫码识别错误事件
    
     *  说明: BarcodeErrorCallback类型
        
        扫码识别控件在扫码过成功发生错误时触发的事件, 并返回错误信息

#### 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;
    }

1.  说明:
    
    设置Barcode扫码控件的样式, 如扫码框、扫码条的颜色等
2.  属性:
    
     *  background: (String类型)条码识别控件背景颜色, 默认红色
     *  frameColor: 扫码框颜色, 默认红色
     *  scanbarColor: 扫码条颜色, 默认红色
     *  top: Barcode扫码控件左上角的垂直偏移量
     *  left: Barcode扫码控件左上角的水平偏移量
     *  width: Barcode扫码控件的宽度
     *  height: Barcode扫码控件的高度
     *  position: Barcode扫码控件在Webview窗口的布局模式