feat: 使用jsqrgb包

components/tools/miaoQRGBCode.vue

@@ -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 imgData = jsqrgb.generate(u8iData, {
-        const data = {
+            size: 600
-            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)
+        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

@@ -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

@@ -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 codeR = jsQR(imageDataRGB.r.data, imageDataRGB.r.width, imageDataRGB.r.height)
-    const codeG = jsQR(imageDataRGB.g.data, imageDataRGB.g.width, imageDataRGB.g.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)
+    // const codeB = jsQR(imageDataRGB.b.data, imageDataRGB.b.width, imageDataRGB.b.height)
-    if (!codeR || !codeG || !codeB) return undefined
+    // if (!codeR || !codeG || !codeB) return undefined
-    const resBuffer = new Uint8Array([...codeR.binaryData, ...codeG.binaryData, ...codeB.binaryData])
+    // const resBuffer = new Uint8Array([...codeR.binaryData, ...codeG.binaryData, ...codeB.binaryData])
-    const data = unpaddingData(resBuffer)
+    // const data = unpaddingData(resBuffer)
+    const data = jsqrgb.recognize(imageData)
     return data
 }
 

pnpm-lock.yaml

@@ -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