vue2-拍照识别二维码条形码–qrcode
<template>
<div class="page-scan">
<!-- 扫描盒子 -->
<div class="scan-box" v-if="scanTextData.showScanBox">
<div
class="scan-cacel"
@click="cancelScan"
v-show="scanTextData.showScanBoxInfo"
>
X
</div>
<video
ref="video"
id="video"
class="scan-video"
v-show="scanTextData.showScanBoxInfo"
autoplay
></video>
<div class="scan-img" v-show="scanTextData.showScanBoxInfo">
<div class="scan-frame">
<span class="cross-line"></span>
</div>
</div>
<div class="scan-tip" v-show="scanTextData.showScanBoxInfo">
{{ scanTextData.tipMsg }}
</div>
</div>
</div>
</template>
<script>
import { BrowserMultiFormatReader } from '@zxing/library'
let scanTextData = {
loadingShow: false,
codeReader: null,
scanText: '',
vin: null,
tipMsg: '识别二维码、条形码',
tipShow: false
}
export default {
name: 'scanCodePage',
data() {
return {
scanTextData: {
loadingShow: false,
codeReader: null,
scanText: '',
vin: null,
tipMsg: '识别二维码、条形码',
tipShow: false,
showScanBox: false,
showScanBoxInfo: false
},
hasBind: false
}
},
methods: {
// 展示扫码盒子
toScanCode() {
console.log('识别二维码', this.dataObj)
scanTextData.codeReader = new BrowserMultiFormatReader()
this.scanTextData.showScanBox = true
// 调用摄像头
this.openScan()
},
cancelScan() {
//识别完停止使用摄像头
let thisVideo = document.getElementById('video')
thisVideo.srcObject.getTracks()[0].stop()
scanTextData.codeReader.reset() // 重置
this.scanTextData.showScanBox = false
setTimeout(() => {
this.scanTextData.showScanBoxInfo = false
}, 1000)
},
// 调用摄像头
async openScan() {
scanTextData.codeReader
.getVideoInputDevices()
.then((videoInputDevices) => {
scanTextData.tipShow = true
scanTextData.tipMsg = '正在调用摄像头...'
console.log('videoInputDevices', videoInputDevices)
// 默认获取第一个摄像头设备id
let 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
}
}
this.decodeFromInputVideoFunc(firstDeviceId)
})
.catch((err) => {
scanTextData.tipShow = false
console.error(err)
})
},
decodeFromInputVideoFunc(firstDeviceId) {
scanTextData.codeReader.reset() // 重置
scanTextData.scanText = ''
scanTextData.codeReader.decodeFromInputVideoDeviceContinuously(
firstDeviceId,
'video',
(result, err) => {
scanTextData.tipMsg = '识别二维码、条形码'
scanTextData.scanText = ''
setTimeout(() => {
this.scanTextData.showScanBoxInfo = true
}, 1000)
if (result) {
console.log('扫描结果', result.text)
if (result.text) {
console.log('扫描结果11', result.text)
this.scanTextData.showScanBox = false
this.scanTextData.showScanBoxInfo = false
this.scanTextData.scanText = result.text
this.$emit('scanResultChange', result.text)
//这里扫描出结果可以调用你想要的方法
//识别完停止使用摄像头
let thisVideo = document.getElementById('video')
thisVideo.srcObject.getTracks()[0].stop()
scanTextData.codeReader.reset() // 重置
}
} else {
// console.log('没出来？',result,err)
}
if (err && !err) {
scanTextData.tipMsg = '识别失败'
setTimeout(() => {
scanTextData.tipShow = false
}, 2000)
console.error(err)
}
}
)
}
},
props: ['dataObj']
}
</script>
<style lang="scss" scoped>
.pullWrap {
width: 100%;
height: 100px;
padding-top: 50px;
background: #fff;
.topTitle {
width: 100%;
position: relative;
.pullTitle {
display: flex;
height: 80px;
line-height: 80px;
margin-top: -40px;
background: #fff;
align-items: center;
justify-content: space-between;
.pullName {
font-size: 30px;
color: rgba(0, 0, 0, 0.85);
}
img {
width: 40px;
height: 40px;
}
.left-icon {
margin: 0 15px;
}
span {
text-decoration: underline;
text-decoration-color: #42a5ff;
color: #42a5ff;
margin-left: 5px;
}
.right-part {
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
text-overflow: ellipsis;
input {
border: none;
flex: 1;
}
}
}
}
}
.scan-index-bar {
background-image: linear-gradient(-45deg, #42a5ff, #59cfff);
}
.van-nav-bar__title {
color: #fff !important;
}
.scan-box {
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
height: 100%;
width: 100vw;
.scan-cacel {
position: absolute;
top: 30px;
left: 30px;
z-index: 9;
color: #333;
font-size: 20px;
background: #f2f2f2;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
}
.scan-video {
height: 100vh;
width: 100vw;
object-fit: cover;
}
.scan-img {
width: 80vw;
height: 80vw;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
.scan-frame {
width: 100%;
height: 100%;
position: relative;
.left-t,
.right-t,
.left-b,
.right-b {
position: absolute;
width: 80px;
height: 80px;
}
.left-t {
top: 0;
left: 0;
border-top: 2px solid #17b1b7;
border-left: 2px solid #17b1b7;
}
.right-t {
top: 0;
right: 0;
border-top: 2px solid #17b1b7;
border-right: 2px solid #17b1b7;
}
.left-b {
bottom: 0;
left: 0;
border-bottom: 2px solid #17b1b7;
border-left: 2px solid #17b1b7;
}
.right-b {
bottom: 0;
right: 0;
border-bottom: 2px solid #17b1b7;
border-right: 2px solid #17b1b7;
}
.cross-line {
width: 80vw;
height: 10px;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
#5dddd3,
rgba(255, 255, 255, 0)
);
position: absolute;
top: 0;
// left: -50px;
animation: identifier_p 5s infinite;
}
@keyframes identifier_p {
0% {
top: 0%;
}
50% {
top: 100%;
}
100% {
top: 0;
}
}
}
}
.scan-tip {
width: 100vw;
text-align: center;
margin-bottom: 10vh;
color: white;
font-size: 5vw;
position: absolute;
bottom: 50px;
left: 0;
color: #fff;
}
.page-scan {
overflow-y: hidden;
// background-color: #363636;
}
</style>
使用
<!-- 拍照识别二维码 -->
<qrcode ref="qrcodeRef" @scanResultChange="toScanQrcode" />
// 扫描获取数据--方法调用
toScanQrcode(val) {
this.$set(this.topFrom, 'resourceCode', val)
},