vue实现二维码天生器息争码器

vue实现二维码天生器息争码器
2.可定制尺寸：通过size调整巨细。
4.静区（quiet zone）支持：通过quietZone调整附近的空缺地域。
5.错误纠正级别：ecl参数控制容错级别。
6.渐变效果：启用线性渐变，可以自界说方向和颜色。
8.错误处置处罚：天生失败时体现错误信息。
10.视图框调整：根据静区计算viewBox，确保精确体现。
效果图：

step1: 添加依赖 npm install qrcode @types/qrcode
step2:核心组件 实现二维码
C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\QrCode.vue

1. <template>
2.   <!-- SVG 容器 -->
3.   <svg
4.     v-if="!error"
5.     :viewBox="viewBox"
6.     :width="size"
7.     :height="size"
8.   >
9.     <!-- 背景 -->
10.     <rect
11.       :x="-quietZone"
12.       :y="-quietZone"
13.       :width="size + quietZone * 2"
14.       :height="size + quietZone * 2"
15.       :fill="backgroundColor"
16.     />
18.     <!-- 渐变定义 -->
19.     <defs v-if="enableLinearGradient">
20.       <linearGradient
21.         id="grad"
22.         :x1="gradientDirection[0]"
23.         :y1="gradientDirection[1]"
24.         :x2="gradientDirection[2]"
25.         :y2="gradientDirection[3]"
26.       >
27.         <stop offset="0" :stop-color="linearGradient[0]" stop-opacity="1"/>
28.         <stop offset="1" :stop-color="linearGradient[1]" stop-opacity="1"/>
29.       </linearGradient>
30.     </defs>
32.     <path
33.       :d="path"
34.       stroke-linecap="butt"
35.       :stroke="enableLinearGradient ? 'url(#grad)' : color"
36.       :stroke-width="cellSize"
37.     />
39.     <!-- Logo 容器 -->
40.     <svg
41.       v-if="logo"
42.       :x="(size - logoSize - logoMargin * 2) / 2"
43.       :y="(size - logoSize - logoMargin * 2) / 2"
44.     >
45.       <!-- Logo 背景 -->
46.       <rect
47.         :width="logoSize + logoMargin * 2"
48.         :height="logoSize + logoMargin * 2"
49.         :fill="logoBackgroundColor"
50.         :rx="logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius"
51.         :ry="logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius"
52.       />
54.       <!-- Logo 图片 -->
55.       <image
56.         :x="logoMargin"
57.         :y="logoMargin"
58.         :width="logoSize"
59.         :height="logoSize"
60.         :href="logo"
61.         preserveAspectRatio="xMidYMid slice"
62.         :rx="logoBorderRadius"
63.         :ry="logoBorderRadius"
64.       />
65.     </svg>
66.   </svg>
68.   <!-- 错误显示 -->
69.   <div v-if="error" class="error">
70.     {{ error.message }}
71.   </div>
72. </template>
74. <script setup lang="ts">
75. import { ref, watchEffect, computed } from 'vue'
76. import QRCode from 'qrcode'
78. // Props 定义
79. const props = defineProps({
80.   value: { type: String, default: 'this is a QR code' },
81.   size: { type: Number, default: 100 },
82.   color: { type: String, default: 'black' },
83.   backgroundColor: { type: String, default: 'white' },
84.   logo: { type: String, default: undefined },
85.   logoSize: { type: Number, default: 100 * 0.2 }, // 默认基于 size 计算
86.   logoBackgroundColor: { type: String, default: 'transparent' },
87.   logoMargin: { type: Number, default: 2 },
88.   logoBorderRadius: { type: Number, default: 0 },
89.   quietZone: { type: Number, default: 0 },
90.   enableLinearGradient: { type: Boolean, default: false },
91.   gradientDirection: {
92.     type: Array as () => string[],
93.     default: () => ['0%', '0%', '100%', '100%']
94.   },
95.   linearGradient: {
96.     type: Array as () => string[],
97.     default: () => ['rgb(255,0,0)', 'rgb(0,255,255)']
98.   },
99.   ecl: { type: String as () => 'L'|'M'|'Q'|'H', default: 'M' }
100. })
102. // 响应式数据
103. const path = ref('')
104. const cellSize = ref(0)
105. const error = ref<Error | null>(null)
107. const genMatrix = (value: string, errorCorrectionLevel: string): boolean[][] => {
108.   const arr = Array.prototype.slice.call(
109.     QRCode.create(value, { errorCorrectionLevel }).modules.data, 0
110.   )
111.   const sqrt = Math.sqrt(arr.length)
112.   return arr.reduce((rows: boolean[][], key: boolean, index: number) => {
113.     (index % sqrt === 0) ? rows.push([key]) : rows[rows.length - 1].push(key)
114.     return rows
115.   }, [])
116. }
118. // 转换矩阵为 SVG 路径
119. const transformMatrixIntoPath = (matrix: boolean[][], size: number) => {
120.   const cellSize = size / matrix.length
121.   let path = ''
122.   matrix.forEach((row, i) => {
123.     let needDraw = false
124.     row.forEach((column, j) => {
125.       if (column) {
126.         if (!needDraw) {
127.           path += `M${cellSize * j} ${cellSize / 2 + cellSize * i} `
128.           needDraw = true
129.         }
130.         if (needDraw && j === matrix.length - 1) {
131.           path += `L${cellSize * (j + 1)} ${cellSize / 2 + cellSize * i} `
132.         }
133.       } else {
134.         if (needDraw) {
135.           path += `L${cellSize * j} ${cellSize / 2 + cellSize * i} `
136.           needDraw = false
137.         }
138.       }
139.     })
140.   })
141.   return { cellSize, path }
142. }
144. // 计算 viewBox
145. const viewBox = computed(() => [
146.   -props.quietZone,
147.   -props.quietZone,
148.   props.size + props.quietZone * 2,
149.   props.size + props.quietZone * 2
150. ].join(' '))
152. // 监听 props 变化
153. watchEffect(() => {
154.   try {
155.     const matrix = genMatrix(props.value, props.ecl)
156.     const result = transformMatrixIntoPath(matrix, props.size)
157.     path.value = result.path
158.     cellSize.value = result.cellSize
159.     error.value = null
160.   } catch (err) {
161.     error.value = err instanceof Error ? err : new Error('QR Code generation failed')
162.   }
163. })
164. </script>
166. <style scoped>
167. .error {
168.   color: red;
169.   border: 1px solid red;
170.   padding: 1rem;
171. }
172. </style>
173. C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\ImgCode.vue
174. [code]<template>
175.   <QrCode
176.     :value="qrCodeValue"
177.     :size="200"
178.     color="#333"
179.     logo="/logo.png"
180.     :logo-size="40"
181.     logo-background-color="white"
182.     :enable-linear-gradient="true"
183.   />
184. </template>
186. <script setup>
187. import QrCode from './QrCode.vue'
188. import { ref } from 'vue'
189. // 图片资源存放在 C:\Users\wangrusheng\PycharmProjects\untitled3\public\logo.png
190. // JSON.stringify() 是 JavaScript 中用于将对象或值转换为 JSON 格式字符串的核心方法，
191. const qrCodeValue = ref(JSON.stringify({
192.   "data": [
193.     {
194.       "case_id": 3,
195.       "category_id": 4,
196.       "title": "as",
197.       "description": "ad",
198.       "price": 4500.0,
199.       "client_id": 5,
200.       "lawyer_id": 6,
201.       "status": "pending",
202.       "created_at": "2025-03-21T06:11:59",
203.       "updated_at": "2025-03-21T06:11:59",
204.       "category_name": "af"
205.     },
206.     {
207.       "case_id": 8,
208.       "category_id": 8,
209.       "title": "bs",
210.       "description": "bd",
211.       "price": 6000.0,
212.       "client_id": 5,
213.       "lawyer_id": 6,
214.       "status": "in_progress",
215.       "created_at": "2025-03-21T06:11:59",
216.       "updated_at": "2025-03-21T06:11:59",
217.       "category_name": "bf"
218.     }
219.   ]
220. }))
221. </script>

复制代码

step4:路由

1. C:\Users\wangrusheng\PycharmProjects\untitled3\src\router\index.js
2. import ImgCode from '../views/ImgCode.vue'
3. { path: '/imgcode', name: 'imgcode', component: ImgCode },
5. C:\Users\wangrusheng\PycharmProjects\untitled3\src\App.vue

复制代码

///我是分割线
解码部门
step102:剖析C:\Users\wangrusheng\PycharmProjects\FastAPIProject1\hello.py

1. from pyzbar.pyzbar import decode
2. from PIL import Image
4. old_file = r'C:\Users\wangrusheng\Downloads\logoz.png'
6. try:
7.     # 打开图片文件
8.     with Image.open(old_file) as img:
9.         decoded_objects = decode(img)
11.         if not decoded_objects:
12.             print("未检测到二维码内容。")
13.         else:
14.             for obj in decoded_objects:
15.                 # 解码数据（假设内容为UTF-8文本）
16.                 data = obj.data.decode('utf-8')
17.                 print("解析结果:", data)
19. except FileNotFoundError:
20.     print(f"错误：文件 '{old_file}' 不存在。")
21. except Exception as e:
22.     print(f"解析时发生错误: {str(e)}")

复制代码

step103:运行

1. (.venv) PS C:\Users\wangrusheng\PycharmProjects\FastAPIProject1> python hello.py
2. 解析结果: 能不能点点赞  点点关注，我谢谢大家
3. (.venv) PS C:\Users\wangrusheng\PycharmProjects\FastAPIProject1>

复制代码

end