100字范文 > 手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码

手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码

时间：2021-08-22 20:07:45

一、场景

手机移动端-原生js 浏览器h5解决识别二维码条形码功能；

不借助Hbuilder.需要自己打包成APP，比如用Hbuilder打包，浏览器端项目h5无打包成app部署X不采用

不借助微信扫一扫，调用微信js-jdk有多麻烦，还要认证服务号，也不适用其它浏览器打开X不采用

二、思路

1.思路一：input(相机拍照)+条形码或二维码识别js支持库

通过h5-input[camera]调用相机进行拍照成图片，通过条形码等识别库解析出数据；

<input @change="toQR" type="file" accept="image/*" capture="camera">

1-1.方案一：input+ Quagga识别库，success,可识别条形码，不能识别二维码；

quagga库地址/package/quagga

npm install quagga --save

1-2.方案二：input+jsqr识别库，success，可识别条形码，也可识别二维码，但二维码识别很局限性，如果只做条形码识别可采用，若是识别二维码不适用；

jsqr库地址/package/jsqr

npm install jsqr --save

例： 1.正方形不带其它无效内容只二维码的图片，设置jsqr识别长宽 100*100 ,可成功识别

2.长方形带其它无效内容，比如拍照出来的二维码图片，设置jsqr识别长宽自适（传入图片的长宽或100*100），都识别失败

1-3.方案三: input+qrcode库，失败

qrcode.decode(img)

2.思路二：调用摄像头（video动态识别）+条形码或二维码识别js支持库

调用手机原生摄像头动态识别用相关支持js库解析二维码条形码

2-1.方案四：video+zxing识别库，success，可识别条形码可识别二维码，完美解决，楼主采用的这种；

zxing-js/library库地址/zxing-js/library

npm install @zxing/library --save

三、实例

1-1.方案一

vue-demo

<template><div class="mt46 input-cells"><div class="flex a-center f-fl"><div>车架号</div><input v-model="queryParams.vin" class="cell-input ml5 mr10" type="text"placeholder="请输入或扫描拍照" /></div><div class="flex l-center a-left"><div class="qr-item mr5 ml5"> <img src="#" width="20" height="20" alt=""><input v-if="isUploadBarCode" class="qr-item-input" @change="toQR" type="file" accept="image/*" capture="camera"></div></div></div></template><style scoped>.input-cells{display: flex;justify-content:space-between;align-items: center;position: relative;background-color: #fff;overflow: hidden;padding: .06rem .15rem;height: .32rem;line-height: .32rem;font-size: .14rem;}.input-label{margin-left: 0;font-size: .14rem;width: .9rem;}.input-cells>input{font-size: .14rem;text-align: right;}.input-cells>img{width: .06rem;height: .1rem;margin-right: .03rem;}.qr-item{width: .3rem;height: 100%;background-size: 120%;position: relative;overflow: hidden;border: 1px solid #dae7f6;background-color: #f5f5f5;}.qr-item-input{opacity: 0;width: 100%;height: 100%;background-size: 100%;position: absolute;top: 0;left: 0;}/*common*/.flex{display: flex;}.a-center{align-items: center;}.f-fl{float: left;}.ml5{margin-left: .05rem;}.mr10{margin-right: .1rem;}</style>

es6引入使用

import Quagga from 'quagga'

使用

1-2.方案二

方案二html+css公用与方案一

qrcodeSearch.js

// import QRCode from '../libs/qr/qrcode'import jsqr from 'jsqr'// 二维码或条形码识别export function showQrCode(file, params, callback) {const ready = new FileReader()/* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ready.readAsDataURL(file) // 调用reader.readAsDataURL()方法，把图片转成base64ready.onload = function() {const re = this.resultcanvasDataURL(re, params, callback)}}function canvasDataURL(path, obj, callback) {const img = new Image()img.src = path// 生成canvasconst canvas = document.createElement('canvas')// const canvas = document.getElementById('qrcanvas')const ctx = canvas.getContext('2d')// const _this = thisimg.onload = function() {console.log('canvasDataURL()-img', img.height, img.width)// let w = img.width// let h = img.heightconst w = 100const h = 100ctx.clearRect(0, 0, w, h)ctx.drawImage(img, 0, 0, w, h);const imageData = ctx.getImageData(0, 0, w, h);const code = jsqr(imageData.data, w, h);const res = {data: null,message: '识别成功',code: 0,}if(code){res.data = code.datacallback(res)}else{res.code = -1res.data = nullres.message = '识别失败'callback(res)}}}

使用

2-1.方案四

注意，因为调用原生摄像头要在https环境下，故需要把代码发布到带域名(https)的测试环境进行调试【这是必要的前提条件，没有测试环境就不要整了】。故而代码调整要反复发布构建代码，不过楼主的这个例子已经是整好了的；

vue-demo

<template><div class="page bgc-f4f4f4"><video ref="video" id="video" class="video vjs-fluid" autoplay></video><div v-show="tipShow" class="tip">{{tipMsg}}</div></div></template><style scoped>/*vjs-fluid 自适video 长宽*/.video{/*border: 1px solid gray;*/margin-top: .5rem;/*width: 2.6rem;*//*height: 3rem;*/}.tip{color: white;font-size: .16rem;}/* common */.bgc-f4f4f4{background-color: #363636;}.page{overflow-y: auto;position: relative;}</style>

使用