条形码，一维码解析（vue版本）

拉起摄像头或者是传入图片进行解析：

第三方插件：quagga.js

二维码插件：qrcodejs2.js（本篇暂时只记录条形码js解析）

首先:

npm i quagga -s -d

在需要的页面引入：

import Quagga from 'quagga' // 条形码 import QRCode from 'qrcodejs2'

HTML：

二维码录入条形码录入


二维码录入


条形码录入

JS：

首先拿到input的图片的地址，因为条形码识别需要这个

handleFiles($event){let files = $event.target.files[0];let _this = thisif(files){let reader = new FileReader()reader.readAsDataURL(files)reader.onloadend = function() {let img = new Image()img.src = reader.result_this.init(img.src) // init函数，路径为参数}}
},

然后init函数

init(src){let _this = thisconst config = {locator: {patchSize: "medium",halfSample: true},numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4),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,src:src}Quagga.decodeSingle(config,function(result) {if(!result){_this.$layer.msg('图片中没有条形码!')return false;}//识别结果if(result.codeResult){console.log("图片中的条形码为："+result.codeResult.code);_this.quaCode = result.codeResult.code}else{_this.$layer.msg('未识别图片中条形码!')}})
},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！