H5实现扫码读取二维码条形码功能（二维码+条形码)

本文主要介绍二维码实现的原理

1、使用插件

npm install @zxing/library

2、主要用到 BrowserMultiFormatReader 这个构造函数，用于打开摄像头

import { BrowserMultiFormatReader } from "@zxing/library";

视图

<template><div class="pageScan"><!-- <van-uploader :after-read="afterRead"><div class="item">相册</div></van-uploader> --><span class="fileinput-button"><span>相册</span><input type="file" @change="fileChange" id="avatar" accept="image/*" /></span><video ref="video" id="video" class="scanVideo" autoplay></video><div class="scanner"><div class="box"><div class="line"></div><div class="angle"></div></div></div></div>
</template>

核心代码（以vue3写法举例）

<script setup>
import { defineComponent, reactive, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import { BrowserMultiFormatReader } from "@zxing/library";
import QrCode from "qrcode-decoder";
const form = reactive({loadingShow: false,scanText: "",vin: null,tipMsg: "尝试识别中...",tipShow: false,
});
const result = ref("");
const router = useRouter();const codeReader = new BrowserMultiFormatReader();
const afterRead = (file) => {getUrl(file.file);
};
const fileChange = () => {// 获取dom 对象let file = document.getElementById("avatar");let resultFile = file?.files[0];console.log("resultFile", resultFile);getUrl(resultFile);// let reader = new FileReader();// reader.readAsText(resultFile, "UTF-8");// console.log("reader", reader);
};
const getUrl = (file) => {let qr = new QrCode();let url = getObjectURL(file);qr.decodeFromImage(url).then((res) => {//打印结果为 解析出来的 二维码地址// alert(`res.data ${res.data}`);if (res.data) {router.push({path: "/TransferAccout",query: { codeResult: res.data },});}// alert(`res.data====${res.data}`, res.data);});
};
const getObjectURL = (file) => {let url = null;if (window.createObjectURL !== undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL !== undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL !== undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;
};
const openScan = async () => {codeReader.getVideoInputDevices().then((videoInputDevices) => {form.tipShow = true;form.tipMsg = "正在调用摄像头...";// console.log("videoInputDevices", videoInputDevices);// 默认获取第一个摄像头设备idlet firstDeviceId = videoInputDevices[0].deviceId;// 获取第一个摄像头设备的名称const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);if (videoInputDevices.length > 1) {// 判断是否后置摄像头if (videoInputDeviceslablestr.indexOf("back") > -1) {firstDeviceId = videoInputDevices[0].deviceId;} else {firstDeviceId = videoInputDevices[1].deviceId;}}decodeFromInputVideoFunc(firstDeviceId);}).catch((err) => {form.tipShow = false;// console.log(`失败出错： ${err}`);});
};
openScan();const decodeFromInputVideoFunc = (firstDeviceId) => {codeReader.reset(); // 重置form.scanText = "";codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId,"video",(result, err) => {form.tipMsg = "正在尝试识别...";form.scanText = "";if (result) {console.log("扫描结果", result);result.value = result;// alert(`扫描结果${result.value}`);router.push({path: "/TransferAccout",query: { codeResult: result.value },});// form.scanText = result.text;form.scanText = result.getText();// alert(`form.scanText===${form.scanText}`);if (form.scanText) {form.tipShow = false;}}if (err && !err) {form.tipMsg = "识别失败";setTimeout(() => {form.tipShow = false;}, 2000);// console.error(err);// alert("err", err);}});
};//销毁组件
onUnmounted(() => {codeReader.reset();console.log("销毁组件");
});
</script>

二维码的样式

// 扫码组件
.scan-index-bar {background-image: linear-gradient(-45deg, #42a5ff, #59cfff);
}
.van-nav-bar__title {color: #fff !important;
}
.scanVideo {height: 80vh;
}
.scanTip {width: 100vw;text-align: center;margin-bottom: 10vh;color: white;font-size: 4vw;
}
.pageScan {overflow-y: hidden;background-color: #363636;width: 100vw;height: 100vh;position: relative;// :deep(.van-uploader) {//   z-index: 99;// }.item {display: inline-block;position: absolute;right: 10px;color: white;top: 10px;font-size: 16px;z-index: 99;}
}.scanner {background-size: 3rem 3rem;background-position: -1rem -1rem;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);
}
.scanner .box {width: 75vw;height: 75vw;max-height: 75vh;max-width: 75vh;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);
}
.scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;
}
.scanner .box:after,
.scanner .box:before,
.scanner .angle:after,
.scanner .angle:before {content: "";display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;
}
.scanner .box:after,
.scanner .box:before {top: 0;border-top-color: #00ff33;
}
.scanner .angle:after,
.scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;
}
.scanner .box:before,
.scanner .angle:before {left: 0;border-left-color: #00ff33;
}
.scanner .box:after,
.scanner .angle:after {right: 0;border-right-color: #00ff33;
}
@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}
}.result {position: fixed;top: 20px;left: 20px;width: 50px;height: 50px;border-radius: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 999;display: flex;justify-content: center;align-items: center;color: #fff;
}
.fileinput-button {position: absolute;display: inline-block;
}.fileinput-button input {position: absolute;right: 0px;top: 0px;opacity: 0;
}
.fileinput-button {span {font-size: 16px;}position: absolute;display: inline-block;overflow: hidden;z-index: 99;color: white;right: 8px;top: 8px;display: flex;align-items: center;
}

H5实现扫码读取二维码条形码功能（二维码+条形码)相关推荐

购物车的功能——JS源码
此CSS的对应的是"购物车的功能--界面源码"的内容和"购物车的功能--CSS源码"的内容,希望大家不要乱 $(function(){//点击复选框全选或全不选 ...
钉钉开发平台 —H5微应用-- 扫条形码、二维码 api 示例
扫条形码.二维码使用说明客户端 Android iOS PC 支持说明支持支持不支持 dd.biz.util.scan({type: String , // type 为 all.qrCod ...
扫描二维码读取文档_使用深度学习读取和分类扫描的文档
扫描二维码读取文档 To many people's dismay, there is still a giant wealth of paper documents floating out the ...
VC++利用笔记本自带摄像头扫二维码功能(附源码demo)
VC++开发常用功能一系列文章 (欢迎订阅,持续更新...) 第8章:VC++利用笔记本自带摄像头扫二维码功能(附源码demo) 源代码demo已上传到百度网盘:永久生效 ,代码实现了打开笔记本 ...
二维码读取之2d_data_codes_rectify_symbol.hdev
*这个实例展示了如何读取一个经过修正的倾斜的条码 This program demonstrates how to read a slanted 2d data code by preprocessi ...
解决自动分析仪条码二维码读取的方案
随着物联网技术的发展,越来越多的企业开始采用条码二维码读取技术来提高企业的生产效率和管理水平.条码二维码读取技术可以帮助企业自动识别和跟踪物品,从而提高企业的生产效率和管理水平.用于检查体液或组织部位 ...
二维码读取之ecc200_simple.dev
*在这个实例中,演示了如何读取Data Matrix ECC 200的条码,第一步呢就是,创建一个二维码读取器,在图形窗口中显示结果 This example program demonstrates ...
视觉检测应用之电路板二维码读取
5G时代的到来,对广大电路板企业的研发.生产以及管理能力提出了更高的要求,企业须以更快的速度向市场提供更具有成本效益的产品,提升产品管理追溯效率也是其中非常重要的一环.在电路板上标记字符.图案.一维码 ...
二维码读取之PDF_417_bottle.hdev
*本例子展示了如何读取PDF 417的条码 This programs shows how to read 2d data codes of type PDF 417. 关闭更新 dev_update ...
二维码读取之ecc200_small_modules_robustness.hdev
*这个实例演示了如何读取非常小的ECC200二维码 This example program shows how to find and decode ECC200 symbols that have ...

H5实现扫码读取二维码条形码功能（二维码+条形码)

H5实现扫码读取二维码条形码功能（二维码+条形码)相关推荐

最新文章

热门文章