fix: base64 encoding hash mismatch and corruption issue

Signed-off-by: Neko Ayaka <[email protected]>

Author: nekomeowww

app/components/InputSlide.vue

@@ -92,7 +92,7 @@ watch(max, (val) => {
   </div>
 </template>
 
-<style less>
+<style scoped less>
 .qrs-slider {
   --qrs-slider-height: 24px;
   --qrs-slider-shadow-color: #aeaeaecd;
@@ -264,15 +264,3 @@ watch(max, (val) => {
   cursor: col-resize;
 }
 </style>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

app/pages/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { slice } from '~~/utils/slicing'
+import { merge, slice } from '~~/utils/slicing'
 
 const count = ref(10)
 
@@ -20,6 +20,7 @@ async function onFileChange(e: Event) {
   const file = target.files?.[0]
   if (!file)
     return
+
   const content = await file.arrayBuffer()
   const chunks = await slice(content)
   data.value = chunks.map(i => JSON.stringify(i))

package.json

@@ -15,6 +15,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "js-base64": "^3.7.7",
     "qr-scanner-wechat": "^0.1.3",
     "uqr": "^0.1.2"
   },

pnpm-lock.yaml

@@ -1,21 +1,44 @@
 import fs from 'node:fs/promises'
+import { join } from 'node:path'
+
 import { expect, it } from 'vitest'
 import { merge, slice } from '../utils/slicing'
 
 it('slice string', async () => {
   const input = await fs.readFile('package.json', 'utf-8')
+
   const chunks = await slice(input, 64)
   expect(chunks.length)
     .toMatchInlineSnapshot(`15`)
+
   const recovered = await merge(chunks)
   expect(input).toBe(recovered)
 })
 
 it('slice binary', async () => {
   const input = (await fs.readFile('package.json', null)).buffer
+  const inputBytes = new Uint8Array(input).length
+
   const chunks = await slice(input, 64)
   expect(chunks.length)
-    .toMatchInlineSnapshot(`15`)
+    .toMatchInlineSnapshot(`23`)
+
+  const recovered = await merge(chunks)
+  expect(new Uint8Array(recovered as any).length).toBe(inputBytes)
+  expect(String(input)).toBe(String(recovered))
+})
+
+it('slice image binary', async () => {
+  // Sample file from Download Sample JPG Image for Demo Use
+  // https:// sample-videos.com/download-sample-jpg-image.php
+  const input = (await fs.readFile(join('test', 'SampleJPGImage_100kbmb.jpg'), null)).buffer
+  const inputBytes = new Uint8Array(input).length
+
+  const chunks = await slice(input, 64)
+  expect(chunks.length)
+    .toMatchInlineSnapshot(`2554`)
+
   const recovered = await merge(chunks)
+  expect(new Uint8Array(recovered as any).length).toBe(inputBytes)
   expect(String(input)).toBe(String(recovered))
 })

test/SampleJPGImage_100kbmb.jpg

@@ -1,4 +1,5 @@
-import { compress, compressToBase64, decompress, decompressFromBase64 } from 'lz-string'
+import { fromUint8Array, toUint8Array } from 'js-base64'
+import { compressToBase64, decompressFromBase64 } from 'lz-string'
 import { hash as getHash } from 'ohash'
 
 export type SliceData = [
@@ -9,14 +10,12 @@ export type SliceData = [
   chunk: string,
 ]
 
-function arrayBufferToBase64(buffer: ArrayBuffer): Promise<string> {
-  const blob = new Blob([buffer], { type: 'text/plain; charset=utf-8' })
-  return blob.text()
+async function arrayBufferToBase64(buffer: ArrayBuffer): Promise<string> {
+  return fromUint8Array(new Uint8Array(buffer))
 }
 
-function base64ToArrayBuffer(str: string): Promise<ArrayBuffer> {
-  const blob = new Blob([str], { type: 'text/plain; charset=utf-8' })
-  return blob.arrayBuffer()
+async function base64ToArrayBuffer(str: string): Promise<ArrayBuffer> {
+  return toUint8Array(str).buffer
 }
 
 export async function slice(input: string | ArrayBuffer, chunkSize = 256): Promise<SliceData[]> {
@@ -54,5 +53,6 @@ export async function merge(slices: SliceData[]): Promise<string | ArrayBuffer>
   if (hash !== targetHash) {
     throw new Error('Hash mismatch')
   }
+
   return data
 }