Análise de código baseada em Vue3 para realizar a digitalização de código e gerar código QR
Neste artigo, apresentaremos como usar o Vue3 para realizar o processo de escanear um código de barras ou código QR com uma pistola de código de barras e convertê-lo em um código QR. Esse processo envolverá as seguintes etapas:
- Instale e importe o plugin no projeto Vue3
vue-qrcode-reader. - Crie um componente Vue3 para renderizar códigos QR.
- Implemente a lógica de leitura de código de barras ou código QR pelo leitor no componente.
- Converta o código de barras ou código QR digitalizado em um código QR e processe-o no componente.
Instalar e importar vue-qrcode-readerplug-ins
Primeiro, precisamos instalar e importar vue-qrcode-readero plugin. Este plug-in nos permite ler facilmente o código de barras ou código QR digitalizado pelo scanner e convertê-lo em um formato de código QR.
Execute o seguinte comando em um terminal para instalar vue-qrcode-readero plug-in:
npm install vue-qrcode-reader --save
Importe o plugin no projeto Vue3 vue-qrcode-reader:
// main.js
import {
createApp } from 'vue'
import App from './App.vue'
import VueQrcodeReader from 'vue-qrcode-reader'
const app = createApp(App)
app.use(VueQrcodeReader)
app.mount('#app')
Criar um componente Vue3
Em seguida, precisamos criar um componente Vue3 para renderizar o código QR. Neste componente, implementaremos a lógica do código de barras ou escaneamento de código QR pelo scanner e converteremos o código escaneado em um código QR.
<!-- QrcodeReader.vue -->
<template>
<div>
<video ref="video" autoplay></video>
<div ref="canvasContainer"></div>
</div>
</template>
<script>
import {
ref } from 'vue'
import QrcodeDecoder from 'qrcode-decoder'
import QrcodeEncoder from 'qrcode'
export default {
name: 'QrcodeReader',
setup () {
const video = ref(null)
const canvasContainer = ref(null)
const decoder = new QrcodeDecoder()
const encoder = new QrcodeEncoder()
const scanQrcode = () => {
const canvas = document.createElement('canvas')
canvas.width = video.value.videoWidth
canvas.height = video.value.videoHeight
canvas.getContext('2d').drawImage(video.value, 0, 0)
decoder.decodeFromCanvas(canvas)
.then(result => {
encoder.encode(result.data)
.then(qrcode => {
const img = document.createElement('img')
img.src = qrcode.toDataURL()
canvasContainer.value.appendChild(img)
})
})
.catch(error => {
console.error(error)
})
}
const startScan = () => {
navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment' } })
.then(stream => {
video.value.srcObject = stream
video.value.play()
})
.catch(error => {
console.error(error)
})
}
const stopScan = () => {
video.value.pause()
video.value.srcObject.getTracks().forEach(track => track.stop())
}
return {
video,
canvasContainer,
scanQrcode,
startScan,
stopScan
}
},
mounted () {
this.startScan()
},
beforeUnmount () {
this.stopScan()
}
}
</script>
Neste componente, usamos <video>elementos para capturar o código de barras ou código QR digitalizado pelo scanner. Usamos qrcode-decodera biblioteca para decodificar o código de barras ou código QR e qrcodeconvertê-lo em formato de código QR usando a biblioteca. Por fim, usamos <img>elementos para renderizar o código QR.
Perceba a lógica de escanear códigos de barras ou códigos QR com leitores de código de barras
Para realizar a lógica de escanear códigos de barras ou códigos QR com o scanner, precisamos adicionar o seguinte código ao componente:
<!-- QrcodeReader.vue -->
<template>
<div>
<video ref="video" autoplay></video>
<div ref="canvasContainer"></div>
</div>
</template>
<script>
import {
ref } from 'vue'
import QrcodeDecoder from 'qrcode-decoder'
import QrcodeEncoder from 'qrcode'
export default {
name: 'QrcodeReader',
setup () {
// ...
const onScan = event => {
if (event.code === 'Enter') {
this.scanQrcode()
}
}
window.addEventListener('keydown', onScan)
return {
// ...
onScan
}
},
// ...
}
</script>
Neste código, adicionamos um keydownouvinte de evento. Quando o usuário pressiona a tecla Enter, scanQrcodeuma função será acionada para escanear e renderizar o código QR.
Converter código de barras digitalizado ou código QR em código QR
Por fim, precisamos converter o código de barras ou código QR digitalizado em um código QR e renderizá-lo no componente. Podemos usar qrcodeuma biblioteca para implementar esse processo. No scanQrcodemétodo do componente, adicionamos o seguinte código:
<!-- QrcodeReader.vue -->
<template>
<div>
<video ref="video" autoplay></video>
<div ref="canvasContainer"></div>
</div>
</template>
<script>
import {
ref } from 'vue'
import QrcodeDecoder from 'qrcode-decoder'
import QrcodeEncoder from 'qrcode'
export default {
name: 'QrcodeReader',
setup () {
// ...
const scanQrcode = () => {
const canvas = document.createElement('canvas')
canvas.width = video.value.videoWidth
canvas.height = video.value.videoHeight
canvas.getContext('2d').drawImage(video.value, 0, 0)
decoder.decodeFromCanvas(canvas)
.then(result => {
encoder.encode(result.data)
.then(qrcode => {
const img = document.createElement('img')
img.src = qrcode.toDataURL()
canvasContainer.value.appendChild(img)
})
})
.catch(error => {
console.error(error)
})
}
return {
// ...
scanQrcode
}
},
// ...
}
</script>
Neste código, usamos métodos qrcodede biblioteca encodepara converter o código de barras digitalizado ou código QR em formato de código QR e renderizá-lo no componente.
Desta forma, concluímos o processo de uso do Vue3 para realizar a arma de digitalização para digitalizar códigos de barras ou códigos QR e convertê-los em códigos QR. Espero que este artigo ajude você!