Vue3使用jsQR实现二维码扫描

### 实现 Vue3 项目中的二维码扫描 为了在 Vue3 项目中集成 `jsQR` 库并实现二维码扫描功能，可以按照以下方法操作： #### 安装依赖包 首先，在 Vue3 项目中安装必要的依赖项。可以通过 npm 或 yarn 来完成此过程。 ```bash npm install jsqr ``` 或者使用 Yarn: ```bash yarn add jsqr ``` #### 创建组件结构 创建一个新的 Vue 组件来处理图像上传和显示 QR 码的内容。HTML 部分定义了一个文件输入框用于选择图片，一个 `<canvas>` 元素用来绘制所选图片，并展示解码后的 QR 码数据[^3]。 ```html <template> <div class="scanner"> <input type="file" @change="onFileChange" /> <p v-if="decodedText">Decoded Text: {{ decodedText }}</p> <canvas ref="canvas"></canvas> </div> </template> <script setup> import { ref, onMounted } from 'vue' import jsQR from 'jsqr' const canvas = ref(null) const ctx = ref(null) const decodedText = ref('') function drawImageOnCanvas(image) { const img = new Image() img.onload = () => { if (ctx.value === null || !img.complete) return let width = img.width, height = img.height; if (width > height) { // 如果宽度大于高度，则保持宽高比缩小到画布大小 width *= 200 / height; height = 200; } else { // 否则按比例调整尺寸 height *= 200 / width; width = 200; } canvas.value.width = width; canvas.value.height = height; ctx.value.drawImage(img, 0, 0, width, height); decodeQRCode(); }; img.src = URL.createObjectURL(image.files[0]); } async function decodeQRCode() { try { const imageData = ctx.value.getImageData(0, 0, canvas.value.width, canvas.value.height).data; const code = jsQR(imageData, canvas.value.width, canvas.value.height); if (code) { decodedText.value = code.data; } else { console.log("No QR Code found"); } } catch (error) { console.error(error.message); } } </script> <style scoped> .scanner input[type='file'] { display: block; margin-bottom: 1rem; } </style> ``` 这段代码展示了如何通过监听文件变化事件 (`@change`) 将用户选取的照片加载至页面上的 `<canvas>` 上下文中，并调用 `decodeQRCode()` 函数尝试从中提取 QR 码信息[^2]。 当成功解析出有效的 QR 码时，会更新视图上绑定的数据属性 `decodedText` 显示其内容；如果没有找到任何有效编码的信息，则会在控制台打印一条消息指出未发现 QR 码。 关于 `threshold` 参数的选择，默认情况下不需要特别设置它，除非遇到特定场景下的识别问题才考虑微调该参数以优化性能[^4]。