vue3里前端生成二维码和解析二维码(不需要后端参与)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.生成二维码
1)安装qrcode
npm install qrcode
2)生成二维码代码
<template>
<el-input v-model="formData.designation"></el-input>
<el-input v-model="formData.people"></el-input>
<el-button type="primary" @click="generateQRCode">生成二维码</el-button>
<!-- 二维码展示 -->
<canvas ref="qrcodeCanvas"></canvas>
</template>
<script setup>
import QRCode from 'qrcode';
const formData = ref({
designation:'',
people:'',
})
const QRCodeType = ref(0)
// 生成二维码
const generateQRCode = async () => {
try {
// 获取 canvas 元素的引用
const canvas = document.querySelector('canvas');
// 将输入字段合并成一个字符串
let data = generateString(formData.value);
console.log(data)
// 使用 qrcode 库生成二维码
await QRCode.toCanvas(canvas, data || '', { errorCorrectionLevel: 'H' });
QRCodeType.value = 1
}catch (error) {
console.error('Error generating QR code:', error);
}
// 对象合成字符串的方法
const generateString = (formData) => {
let result = ''
for (const key in formData) {
if (formData.hasOwnProperty(key)) {
result += formData[key] + ','
}
}// 去掉末尾的逗号
result = result.slice(0, -1)
return result
}
};
</script>
2.解析二维码
1)安装 jsqr
npm install jsqr
2)解析二维码代码
父组件
<template>
<parseQRCode @get-code-data="getCodeData"></parseQRCode>
</template>
<script setup>
import parseQRCode from './components/parseQRCode.vue'
// 获取得到的二维码数据
const getCodeData = (vm) =>{
const codeData = vm.split(',');
console.log(codeData,'获取得到的二维码数据',vm)
formData.value.designation = codeData[0]
formData.value.people = codeData[1]
}
</script>
子组件
<template>
<div>
<div @click="openFileInput" style="cursor: pointer;">从图像二维码导入</div>
<input id="fileInput" type="file" accept="image/*" style="display: none;" @change="handleFileChange">
<!-- <div v-if="decodedValue">
解析结果: {{ decodedValue }}
</div>
<div v-else>
未找到二维码
</div> -->
</div>
</template>
<script setup>
import { ref } from 'vue';
import jsQR from 'jsqr';
const decodedValue = ref(null);
const emits = defineEmits([
'get-code-data',
])
const openFileInput = () => {
const fileInput = document.getElementById('fileInput');
if (fileInput) {
fileInput.click();
}
};
const handleFileChange = (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
const image = new Image();
image.onload = () => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
const imageData = context.getImageData(0, 0, image.width, image.height);
const code = jsQR(imageData.data, image.width, image.height);
if (code) {
decodedValue.value = code.data;
emits('get-code-data', code.data);
} else {
decodedValue.value = null;
}
};
image.src = event.target.result;
};
reader.readAsDataURL(file);
};
</script>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)