feat: 添加一个qrgb的demo

components/miaoQRScanner.vue

@@ -21,12 +21,10 @@ let timer: any | undefined = undefined
 
 const scannerResult = new Set()
 
-const getQRData = (videoFrame: VideoFrame): string | undefined => {
+const getQRData = (videoFrame: ImageBitmap ): string | undefined => {
     const canvas = document.createElement('canvas')
     // const canvas = testCtx.value!
-    // @ts-ignore
     canvas.width = videoFrame.width
-    // @ts-ignore
     canvas.height = videoFrame.height
     // console.log(canvas.width, canvas.height)
     const ctx = canvas.getContext('2d')
@@ -82,6 +80,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
     stream?.getTracks().forEach(track => track.stop())
+    clearInterval(timer)
 })
 
 </script>

components/tools/miaoQRGBCode.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <canvas ref="canvasRefRGB"></canvas>
+    </div>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode';
+import { onMounted, ref, watchEffect } from 'vue';
+
+const props = defineProps<{
+    value: string
+}>()
+
+const width = ref(600)
+
+const canvasRefRGB = ref<HTMLCanvasElement>()
+
+const generateQRCodeCanvasData = (data: string) => {
+    const canvas = document.createElement('canvas')
+    canvas.width = width.value
+    canvas.height = width.value
+    const ctx = canvas.getContext('2d')!
+    QRCode.toCanvas(canvas, [{ data: new TextEncoder().encode(data), mode: 'byte' }], {
+        width: width.value,
+    })
+    const imageData = ctx.getImageData(0, 0, width.value, width.value)
+    return imageData
+}
+
+const paddingData = (data: string) => {
+    const b64Data = btoa(data)
+    if (b64Data.length % 3 === 0) {
+        return b64Data + '012'
+    } else if (b64Data.length % 3 === 1) {
+        return b64Data + '01'
+    } else {
+        return b64Data + '0'
+    }
+}
+
+onMounted(() => {
+    watchEffect(() => {
+        const padedData = paddingData(props.value)
+        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)
+        }
+        // console.log({
+        //     data,
+        //     ECData: {
+        //         r: new TextEncoder().encode(data.r),
+        //         g: new TextEncoder().encode(data.g),
+        //         b: new TextEncoder().encode(data.b)
+        //     }
+        // })
+        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)
+    })
+})
+
+
+</script>
+
+<style scoped></style>

pages/index.vue

@@ -148,6 +148,16 @@ const PageContent = reactive<PageContent[]>([
           }
         ]
       },
+      {
+        name: 'QRGB',
+        description: '把三个二维码叠在一起，真是创创又新新啊',
+        nuxtLinks: [
+          {
+            name: 'link',
+            to: `/tools/QRGB`
+          }
+        ]
+      },
     ]
   }, {
     subTitle: '学习资料',

pages/tools/QRGB.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <nuxt-link to="/tools/QRGB/code">code</nuxt-link>
+        <nuxt-link to="/tools/QRGB/scanner">scanner</nuxt-link>
+        <nuxt-page></nuxt-page>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pages/tools/QRGB/code.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <miaoQRGBCode :value="testData"/>
+        <div>{{ testData }}</div>
+        <input type="text" v-model="testData">
+        <!-- <miaoQRCode :value="testData"/> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import miaoQRGBCode from '~/components/tools/miaoQRGBCode.vue';
+// import miaoQRCode from '../components/miaoQRCode.vue';
+
+const testData = ref(new Array(3).fill(0).map(_ => `${Math.random()}`).join(''))
+
+</script>
+
+<style scoped>
+
+</style>

pages/tools/QRGB/scanner.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="qr-scanner-wrapper">
+        <video ref="scannerDisplayRef"></video>
+        <canvas ref="testCtx" style="transform: scale(.6);" v-show="true"></canvas>
+        <canvas ref="testCtxR" style="transform: scale(.6);" v-show="true"></canvas>
+        <canvas ref="testCtxG" style="transform: scale(.6);" v-show="true"></canvas>
+        <canvas ref="testCtxB" style="transform: scale(.6);" v-show="true"></canvas>
+        <div>{{ res }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import jsQR from 'jsqr'
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const emit = defineEmits<{
+    onResult: [value: string]
+}>()
+
+const scannerDisplayRef = ref<HTMLVideoElement>()
+const testCtx = ref<HTMLCanvasElement>()
+const testCtxR = ref<HTMLCanvasElement>()
+const testCtxG = ref<HTMLCanvasElement>()
+const testCtxB = ref<HTMLCanvasElement>()
+// const result = reactive<string[]>([])
+const res = ref<string>('')
+
+let stream: MediaStream | null = null
+let timer: any | undefined = undefined
+
+const unpaddingData = (data: string) => {
+    if (data.endsWith('012')) {
+        return atob(data.slice(0, data.length - 3))    
+    } else if (data.endsWith('01')) {
+        return atob(data.slice(0, data.length - 2)) 
+    } else {
+        return atob(data.slice(0, data.length - 1)) 
+    }
+}
+
+// const scannerResult = new Set()
+
+const getQRDataFromVideoFrame = (videoFrame: VideoFrame): string | undefined => {
+    const canvas = testCtx.value!
+    canvas.width = videoFrame.codedWidth
+    canvas.height = videoFrame.codedHeight
+    // if (!videoFrame.codedWidth) return undefined
+    const ctx = canvas.getContext('2d')
+    ctx?.drawImage(videoFrame, 0, 0, canvas.width, canvas.height)
+    videoFrame.close()
+    const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height)
+    if (!imageData) return undefined
+    const imageDataRGB = {
+        r: new ImageData(canvas.width, canvas.height),
+        g: new ImageData(canvas.width, canvas.height),
+        b: new ImageData(canvas.width, canvas.height),
+    }
+    for (let i = 0; i < imageData.data.length; i += 4) {
+        imageDataRGB.r.data[i] = imageData.data[i]
+        imageDataRGB.r.data[i + 1] = imageData.data[i]
+        imageDataRGB.r.data[i + 2] = imageData.data[i]
+        imageDataRGB.r.data[i + 3] = imageData.data[i + 3]
+        imageDataRGB.g.data[i] = imageData.data[i + 1]
+        imageDataRGB.g.data[i + 1] = imageData.data[i + 1]
+        imageDataRGB.g.data[i + 2] = imageData.data[i + 1]
+        imageDataRGB.g.data[i + 3] = imageData.data[i + 3]
+        imageDataRGB.b.data[i] = imageData.data[i + 2]
+        imageDataRGB.b.data[i + 1] = imageData.data[i + 2]
+        imageDataRGB.b.data[i + 2] = imageData.data[i + 2]
+        imageDataRGB.b.data[i + 3] = imageData.data[i + 3]
+    }
+    testCtxR.value!.width = canvas.width
+    testCtxR.value!.height = canvas.height
+    testCtxG.value!.width = canvas.width
+    testCtxG.value!.height = canvas.height
+    testCtxB.value!.width = canvas.width
+    testCtxB.value!.height = canvas.height
+    testCtxR.value!.getContext('2d')?.putImageData(imageDataRGB.r, 0, 0)
+    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 data = unpaddingData(codeR?.data + codeG?.data + codeB?.data)
+    return data
+}
+
+const handleTrackProcessor = async (track: MediaStreamTrack) => {
+    // @ts-ignore
+    const trackProcessor = new MediaStreamTrackProcessor(track);
+
+    const reader = trackProcessor.readable.getReader();
+    while (true) {
+        const result = await reader.read();
+        if (result.done) break;
+        const frameFromCamera = result.value as VideoFrame;
+        const data = getQRDataFromVideoFrame(frameFromCamera)
+        if (data) {
+           res.value = data 
+           console.log(data)
+           emit('onResult', data)
+        }
+    }
+}
+
+onMounted(async () => {
+    try {
+        stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: 'environment' },
+        })
+    } catch (e) {
+        stream = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+        })
+    }
+    if (stream) {
+        scannerDisplayRef.value!.srcObject = stream
+        scannerDisplayRef.value!.play()
+        const videoTrack = stream.getVideoTracks()[0]
+        // handleVideoTrack(videoTrack)
+        handleTrackProcessor(videoTrack)
+    }
+})
+
+onBeforeUnmount(() => {
+    stream?.getTracks().forEach(track => track.stop())
+    clearInterval(timer)
+})
+
+</script>
+
+<style scoped>
+.qr-scanner-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    video {
+        height: inherit;
+        width: inherit;
+        max-height: inherit;
+        max-width: inherit;
+        object-fit: contain;
+    }
+}
+</style>