更新记录

1.0(2020-04-10)

支持H5条形码识别


平台兼容性

简介

​ 这是一个利用quagga js扫描条形码的项目。

​ 有关quagga js可以访问quagga官网 1.引入components下的quagga.min.js文件 2.在页面调用var Quagga = require('../../components/quagga.min.js'); 3.此插件提供了三种方式实现扫码的功能,一种就是上文提出的getUserMedia,还有一种是传入一个image文件,可以使用文件的相对路径和绝对路径,还可以使用base64的编码格式,如果图片清晰的话,可以直接解析。还有一种是通过file文件上传控件上传图片进行解析。 4.这里采用uni.chooseImage获取图片地址,然后识别的方式,代码就几行看看就明白了. ​ 主要代码段是:

uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                        sourceType: ['album'], //从相册选择
                        success: res => {
                            var filePath = res.tempFilePaths[0];
                            Quagga.decodeSingle(
                                {
                                    //解码方式,与条形码的编码方式有关
                                    decoder: {
                                        readers: [
                                            'code_128_reader',
                                            'ean_reader',
                                            'ean_8_reader',
                                            'code_39_reader',
                                            'code_39_vin_reader',
                                            'codabar_reader',
                                            'upc_reader',
                                            'upc_e_reader',
                                            'i2of5_reader'
                                        ] // List of active readers
                                    },
                                    locate: true, // try to locate the barcode in the image
                                    src: filePath
                                },
                                function(result) {
                                    console.log('识别结果', result);
                                    me.SN = result.codeResult.code;
                                }
                            );
                        }
                    });

​ Quagga.decodeSingle(config, callback);其中config是具体的配置信息,包括:

{
  numOfWorkers: 4,
  locate: true,
  inputStream: {...},
  frequency: 10,
  decoder:{...},
  locator: {...},
  debug: false,
}

​ 具体的解释可以查看quagga js的官网。

注意

​ decoder的配置项中包涵解码的的方式,解码需要保证与条形码生成的编码方式一致,例如code 128,解码时需 要设置为reader_128_code。可选择的方式有:

  • code_128_reader (default)
  • ean_reader
  • ean_8_reader
  • code_39_reader
  • code_39_vin_reader
  • codabar_reader
  • upc_reader
  • upc_e_reader
  • i2of5_reader
  • 2of5_reader
  • code_93_reader

​ 代码支持在手机端拉起摄像头进行条形码扫描。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问