vue实现二维码生成器和解码器
1.生成基本二维码：根据输入的value生成二维码。
2.可定制尺寸：通过size调整大小。
3.颜色和背景色：设置二维码颜色和背景。
4.静区（quiet zone）支持：通过quietZone调整周围的空白区域。
5.错误纠正级别：ecl参数控制容错级别。
6.渐变效果：启用线性渐变，可以自定义方向和颜色。
7.Logo嵌入：在二维码中间添加logo，可调整大小、边距、背景色和圆角。
8.错误处理：生成失败时显示错误信息。
9.响应式更新：当props变化时自动重新生成二维码。
10.视图框调整：根据静区计算viewBox，确保正确显示。
效果图：
step1: 添加依赖 npm install qrcode @types/qrcode
step2:核心组件 实现二维码
C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\QrCode.vue
<template>
<!-- SVG 容器 -->
<svg
v-if="!error"
:viewBox="viewBox"
:width="size"
:height="size"
>
<!-- 背景 -->
<rect
:x="-quietZone"
:y="-quietZone"
:width="size + quietZone * 2"
:height="size + quietZone * 2"
:fill="backgroundColor"
/>
<!-- 渐变定义 -->
<defs v-if="enableLinearGradient">
<linearGradient
id="grad"
:x1="gradientDirection[0]"
:y1="gradientDirection[1]"
:x2="gradientDirection[2]"
:y2="gradientDirection[3]"
>
<stop offset="0" :stop-color="linearGradient[0]" stop-opacity="1"/>
<stop offset="1" :stop-color="linearGradient[1]" stop-opacity="1"/>
</linearGradient>
</defs>
<!-- 二维码路径 -->
<path
:d="path"
stroke-linecap="butt"
:stroke="enableLinearGradient ? 'url(#grad)' : color"
:stroke-width="cellSize"
/>
<!-- Logo 容器 -->
<svg
v-if="logo"
:x="(size - logoSize - logoMargin * 2) / 2"
:y="(size - logoSize - logoMargin * 2) / 2"
>
<!-- Logo 背景 -->
<rect
:width="logoSize + logoMargin * 2"
:height="logoSize + logoMargin * 2"
:fill="logoBackgroundColor"
:rx="logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius"
:ry="logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius"
/>
<!-- Logo 图片 -->
<image
:x="logoMargin"
:y="logoMargin"
:width="logoSize"
:height="logoSize"
:href="logo"
preserveAspectRatio="xMidYMid slice"
:rx="logoBorderRadius"
:ry="logoBorderRadius"
/>
</svg>
</svg>
<!-- 错误显示 -->
<div v-if="error" class="error">
{{ error.message }}
</div>
</template>
<script setup lang="ts">
import { ref, watchEffect, computed } from 'vue'
import QRCode from 'qrcode'
// Props 定义
const props = defineProps({
value: { type: String, default: 'this is a QR code' },
size: { type: Number, default: 100 },
color: { type: String, default: 'black' },
backgroundColor: { type: String, default: 'white' },
logo: { type: String, default: undefined },
logoSize: { type: Number, default: 100 * 0.2 }, // 默认基于 size 计算
logoBackgroundColor: { type: String, default: 'transparent' },
logoMargin: { type: Number, default: 2 },
logoBorderRadius: { type: Number, default: 0 },
quietZone: { type: Number, default: 0 },
enableLinearGradient: { type: Boolean, default: false },
gradientDirection: {
type: Array as () => string[],
default: () => ['0%', '0%', '100%', '100%']
},
linearGradient: {
type: Array as () => string[],
default: () => ['rgb(255,0,0)', 'rgb(0,255,255)']
},
ecl: { type: String as () => 'L'|'M'|'Q'|'H', default: 'M' }
})
// 响应式数据
const path = ref('')
const cellSize = ref(0)
const error = ref<Error | null>(null)
// 生成二维码矩阵
const genMatrix = (value: string, errorCorrectionLevel: string): boolean[][] => {
const arr = Array.prototype.slice.call(
QRCode.create(value, { errorCorrectionLevel }).modules.data, 0
)
const sqrt = Math.sqrt(arr.length)
return arr.reduce((rows: boolean[][], key: boolean, index: number) => {
(index % sqrt === 0) ? rows.push([key]) : rows[rows.length - 1].push(key)
return rows
}, [])
}
// 转换矩阵为 SVG 路径
const transformMatrixIntoPath = (matrix: boolean[][], size: number) => {
const cellSize = size / matrix.length
let path = ''
matrix.forEach((row, i) => {
let needDraw = false
row.forEach((column, j) => {
if (column) {
if (!needDraw) {
path += `M${cellSize * j} ${cellSize / 2 + cellSize * i} `
needDraw = true
}
if (needDraw && j === matrix.length - 1) {
path += `L${cellSize * (j + 1)} ${cellSize / 2 + cellSize * i} `
}
} else {
if (needDraw) {
path += `L${cellSize * j} ${cellSize / 2 + cellSize * i} `
needDraw = false
}
}
})
})
return { cellSize, path }
}
// 计算 viewBox
const viewBox = computed(() => [
-props.quietZone,
-props.quietZone,
props.size + props.quietZone * 2,
props.size + props.quietZone * 2
].join(' '))
// 监听 props 变化
watchEffect(() => {
try {
const matrix = genMatrix(props.value, props.ecl)
const result = transformMatrixIntoPath(matrix, props.size)
path.value = result.path
cellSize.value = result.cellSize
error.value = null
} catch (err) {
error.value = err instanceof Error ? err : new Error('QR Code generation failed')
}
})
</script>
<style scoped>
.error {
color: red;
border: 1px solid red;
padding: 1rem;
}
</style>
step3: 调用二维码组件
C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\ImgCode.vue
<template>
<QrCode
:value="qrCodeValue"
:size="200"
color="#333"
logo="/logo.png"
:logo-size="40"
logo-background-color="white"
:enable-linear-gradient="true"
/>
</template>
<script setup>
import QrCode from './QrCode.vue'
import { ref } from 'vue'
// 图片资源存放在 C:\Users\wangrusheng\PycharmProjects\untitled3\public\logo.png
// JSON.stringify() 是 JavaScript 中用于将对象或值转换为 JSON 格式字符串的核心方法，
//value="你们好，这里是二维码识别器，很高兴认识你们"
const qrCodeValue = ref(JSON.stringify({
"data": [
{
"case_id": 3,
"category_id": 4,
"title": "as",
"description": "ad",
"price": 4500.0,
"client_id": 5,
"lawyer_id": 6,
"status": "pending",
"created_at": "2025-03-21T06:11:59",
"updated_at": "2025-03-21T06:11:59",
"category_name": "af"
},
{
"case_id": 8,
"category_id": 8,
"title": "bs",
"description": "bd",
"price": 6000.0,
"client_id": 5,
"lawyer_id": 6,
"status": "in_progress",
"created_at": "2025-03-21T06:11:59",
"updated_at": "2025-03-21T06:11:59",
"category_name": "bf"
}
]
}))
</script>
step4:路由
C:\Users\wangrusheng\PycharmProjects\untitled3\src\router\index.js
import ImgCode from '../views/ImgCode.vue'
{ path: '/imgcode', name: 'imgcode', component: ImgCode },
C:\Users\wangrusheng\PycharmProjects\untitled3\src\App.vue
<router-link to="/imgcode" active-class="active-link">二维码</router-link>
///我是分割线
解码部分
step101:安装依赖 pip install pyzbar Pillow，你去网站上，随便找个二维码生成器，然后将生成的二维码保存本地
step102:解析C:\Users\wangrusheng\PycharmProjects\FastAPIProject1\hello.py
from pyzbar.pyzbar import decode
from PIL import Image
# 二维码图片路径 C:\Users\wangrusheng\Downloads
old_file = r'C:\Users\wangrusheng\Downloads\logoz.png'
try:
# 打开图片文件
with Image.open(old_file) as img:
# 解析二维码
decoded_objects = decode(img)
if not decoded_objects:
print("未检测到二维码内容。")
else:
for obj in decoded_objects:
# 解码数据（假设内容为UTF-8文本）
data = obj.data.decode('utf-8')
print("解析结果:", data)
except FileNotFoundError:
print(f"错误：文件 '{old_file}' 不存在。")
except Exception as e:
print(f"解析时发生错误: {str(e)}")
step103:运行
(.venv) PS C:\Users\wangrusheng\PycharmProjects\FastAPIProject1> python hello.py
解析结果: 能不能点点赞 点点关注，我谢谢大家
(.venv) PS C:\Users\wangrusheng\PycharmProjects\FastAPIProject1>
end