h5条形码识别

更新记录

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

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