539943419/miaoBlog
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 使用jsqrgb包

Browse Source
This commit is contained in:
539943419 committed 2025-01-28 16:52:33 +08:00
1 parent 89c138cedf
commit d61b5e8a52
4 files changed
+50 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/tools/miaoQRGBCode.vue
+30 -19
View File
@@ -6,6 +6,7 @@
<script setup lang="ts">
import QRCode from 'qrcode';
import jsqrgb from 'jsqrgb';
import { onMounted, ref, watchEffect } from 'vue';
const props = defineProps<{
@@ -36,29 +37,39 @@ const paddingData = (data: Uint8Array) => {
onMounted(() => {
watchEffect(() => {
const u8iData = props.value instanceof Uint8Array ? props.value : new TextEncoder().encode(props.value)
const padedData = paddingData(u8iData)
const data = {
r: padedData.slice(0, padedData.length / 3),
g: padedData.slice(padedData.length / 3, padedData.length / 3 * 2),
b: padedData.slice(padedData.length / 3 * 2, padedData.length)
}
const imgData = {
r: generateQRCodeCanvasData(data.r),
g: generateQRCodeCanvasData(data.g),
b: generateQRCodeCanvasData(data.b)
}
const rgbImgData = new ImageData(width.value, width.value)
for (let i = 0; i < rgbImgData.data.length; i += 4) {
rgbImgData.data[i] = imgData.r.data[i]
rgbImgData.data[i + 1] = imgData.g.data[i + 1]
rgbImgData.data[i + 2] = imgData.b.data[i + 2]
rgbImgData.data[i + 3] = 2 << 8 - 1
}
const imgData = jsqrgb.generate(u8iData, {
size: 600
})
const canvas = canvasRefRGB.value!
canvas.width = width.value
canvas.height = width.value
const ctx = canvas.getContext('2d')!
ctx.putImageData(rgbImgData, 0, 0)
ctx.putImageData(imgData, 0, 0)
return
// const padedData = paddingData(u8iData)
// const data = {
// r: padedData.slice(0, padedData.length / 3),
// g: padedData.slice(padedData.length / 3, padedData.length / 3 * 2),
// b: padedData.slice(padedData.length / 3 * 2, padedData.length)
// }
// const imgData = {
// r: generateQRCodeCanvasData(data.r),
// g: generateQRCodeCanvasData(data.g),
// b: generateQRCodeCanvasData(data.b)
// }
// const rgbImgData = new ImageData(width.value, width.value)
// for (let i = 0; i < rgbImgData.data.length; i += 4) {
// rgbImgData.data[i] = imgData.r.data[i]
// rgbImgData.data[i + 1] = imgData.g.data[i + 1]
// rgbImgData.data[i + 2] = imgData.b.data[i + 2]
// rgbImgData.data[i + 3] = 2 << 8 - 1
// }
// const canvas = canvasRefRGB.value!
// canvas.width = width.value
// canvas.height = width.value
// const ctx = canvas.getContext('2d')!
// ctx.putImageData(rgbImgData, 0, 0)
})
})
package.json
+1
View File
@@ -20,6 +20,7 @@
"dayjs": "^1.11.13",
"jsonwebtoken": "^9.0.2",
"jsqr": "^1.4.0",
"jsqrgb": "^0.0.3",
"markdown-it": "^14.1.0",
"node-fetch": "^3.3.2",
"nuxt": "^3.15.1",
pages/tools/QRGB/scanner.vue
+8 -6
View File
@@ -11,6 +11,7 @@
<script setup lang="ts">
import jsQR from 'jsqr'
import jsqrgb from 'jsqrgb';
import { ref, onMounted, onBeforeUnmount } from 'vue';
const emit = defineEmits<{
@@ -108,12 +109,13 @@ const getQRDataFromVideoFrame = (videoFrame: VideoFrame): Uint8Array | undefined
testCtxG.value!.getContext('2d')?.putImageData(imageDataRGB.g, 0, 0)
testCtxB.value!.getContext('2d')?.putImageData(imageDataRGB.b, 0, 0)
// const code = jsQR(imageData?.data, imageData?.width, imageData?.height)
const codeR = jsQR(imageDataRGB.r.data, imageDataRGB.r.width, imageDataRGB.r.height)
const codeG = jsQR(imageDataRGB.g.data, imageDataRGB.g.width, imageDataRGB.g.height)
const codeB = jsQR(imageDataRGB.b.data, imageDataRGB.b.width, imageDataRGB.b.height)
if (!codeR || !codeG || !codeB) return undefined
const resBuffer = new Uint8Array([...codeR.binaryData, ...codeG.binaryData, ...codeB.binaryData])
const data = unpaddingData(resBuffer)
// const codeR = jsQR(imageDataRGB.r.data, imageDataRGB.r.width, imageDataRGB.r.height)
// const codeG = jsQR(imageDataRGB.g.data, imageDataRGB.g.width, imageDataRGB.g.height)
// const codeB = jsQR(imageDataRGB.b.data, imageDataRGB.b.width, imageDataRGB.b.height)
// if (!codeR || !codeG || !codeB) return undefined
// const resBuffer = new Uint8Array([...codeR.binaryData, ...codeG.binaryData, ...codeB.binaryData])
// const data = unpaddingData(resBuffer)
const data = jsqrgb.recognize(imageData)
return data
}
pnpm-lock.yaml
Generated
+11 -16
View File
@@ -38,6 +38,9 @@ importers:
jsqr:
specifier: ^1.4.0
version: 1.4.0
jsqrgb:
specifier: ^0.0.3
version: 0.0.3
markdown-it:
specifier: ^14.1.0
version: 14.1.0
@@ -867,42 +870,36 @@ packages:
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm-musl@2.5.0':
resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-arm64-glibc@2.5.0':
resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm64-musl@2.5.0':
resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-x64-glibc@2.5.0':
resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-x64-musl@2.5.0':
resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
'@parcel/watcher-wasm@2.5.0':
resolution: {integrity: sha512-Z4ouuR8Pfggk1EYYbTaIoxc+Yv4o7cGQnH0Xy8+pQ+HbiW+ZnwhcD2LPf/prfq1nIWpAxjOkQ8uSMFWMtBLiVQ==}
@@ -1060,61 +1057,51 @@ packages:
resolution: {integrity: sha512-PaMRNBSqCx7K3Wc9QZkFx5+CX27WFpAMxJNiYGAXfmMIKC7jstlr32UhTgK6T07OtqR+wYlWm9IxzennjnvdJg==}
cpu: [arm]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.30.1':
resolution: {integrity: sha512-B8Rcyj9AV7ZlEFqvB5BubG5iO6ANDsRKlhIxySXcF1axXYUyqwBok+XZPgIYGBgs7LDXfWfifxhw0Ik57T0Yug==}
cpu: [arm]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.30.1':
resolution: {integrity: sha512-hqVyueGxAj3cBKrAI4aFHLV+h0Lv5VgWZs9CUGqr1z0fZtlADVV1YPOij6AhcK5An33EXaxnDLmJdQikcn5NEw==}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.30.1':
resolution: {integrity: sha512-i4Ab2vnvS1AE1PyOIGp2kXni69gU2DAUVt6FSXeIqUCPIR3ZlheMW3oP2JkukDfu3PsexYRbOiJrY+yVNSk9oA==}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-loongarch64-gnu@4.30.1':
resolution: {integrity: sha512-fARcF5g296snX0oLGkVxPmysetwUk2zmHcca+e9ObOovBR++9ZPOhqFUM61UUZ2EYpXVPN1redgqVoBB34nTpQ==}
cpu: [loong64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-powerpc64le-gnu@4.30.1':
resolution: {integrity: sha512-GLrZraoO3wVT4uFXh67ElpwQY0DIygxdv0BNW9Hkm3X34wu+BkqrDrkcsIapAY+N2ATEbvak0XQ9gxZtCIA5Rw==}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.30.1':
resolution: {integrity: sha512-0WKLaAUUHKBtll0wvOmh6yh3S0wSU9+yas923JIChfxOaaBarmb/lBKPF0w/+jTVozFnOXJeRGZ8NvOxvk/jcw==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-s390x-gnu@4.30.1':
resolution: {integrity: sha512-GWFs97Ruxo5Bt+cvVTQkOJ6TIx0xJDD/bMAOXWJg8TCSTEK8RnFeOeiFTxKniTc4vMIaWvCplMAFBt9miGxgkA==}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.30.1':
resolution: {integrity: sha512-UtgGb7QGgXDIO+tqqJ5oZRGHsDLO8SlpE4MhqpY9Llpzi5rJMvrK6ZGhsRCST2abZdBqIBeXW6WPD5fGK5SDwg==}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.30.1':
resolution: {integrity: sha512-V9U8Ey2UqmQsBT+xTOeMzPzwDzyXmnAoO4edZhL7INkwQcaW1Ckv3WJX3qrrp/VHaDkEWIBWhRwP47r8cdrOow==}
cpu: [x64]
os: [linux]
libc: [musl]
'@rollup/rollup-win32-arm64-msvc@4.30.1':
resolution: {integrity: sha512-WabtHWiPaFF47W3PkHnjbmWawnX/aE57K47ZDT1BXTS5GgrBUEpvOzq0FI0V/UYzQJgdb8XlhVNH8/fwV8xDjw==}
@@ -2295,6 +2282,9 @@ packages:
jsqr@1.4.0:
resolution: {integrity: sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==}
jsqrgb@0.0.3:
resolution: {integrity: sha512-R2hArt7TLz1zygOc0Erd2/ssBGLW1wFE5uFyqOub5e8SW7K2/sGKc2qUkg5NbK9hbDgNu448cts/37y+oipbng==}
jwa@1.4.1:
resolution: {integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==}
@@ -6254,6 +6244,11 @@ snapshots:
jsqr@1.4.0: {}
jsqrgb@0.0.3:
dependencies:
jsqr: 1.4.0
qrcode: 1.5.4
jwa@1.4.1:
dependencies:
buffer-equal-constant-time: 1.0.1