fix: image too large

Author: Jazee6

components/ChatInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {handleImgZoom} from "~/utils/tools";
+import {compressionFile, handleImgZoom} from "~/utils/tools";
 
 const input = ref('')
 const addHistory = ref(true)
@@ -52,10 +52,6 @@ function checkFile(file: File) {
     alert(imageType.join(', ') + ' only')
     return false
   }
-  if (file.size > 1024 * 1024 * 15) {
-    alert('The image size should be less than 15MB')
-    return false
-  }
   return true
 }
 
@@ -64,14 +60,18 @@ function handleAddFiles() {
   input.type = 'file'
   input.accept = imageType.join(',')
   input.multiple = true
-  input.onchange = () => {
-    const files = Array.from(input.files || [])
-    files.forEach(file => {
-      if (!checkFile(file)) return
+  input.onchange = async () => {
+    document.body.style.cursor = 'wait'
 
+    const files = Array.from(input.files || [])
+    for (const f of files) {
+      if (!checkFile(f)) continue;
+      const file = await compressionFile(f, f.type)
       const url = URL.createObjectURL(file)
       fileList.value.push({file, url})
-    })
+    }
+
+    document.body.style.cursor = 'auto'
   }
   input.click()
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-ai-web",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "private": true,
   "type": "module",
   "scripts": {

utils/tools.ts

@@ -103,4 +103,44 @@ export function handleImgZoom(img: HTMLImageElement) {
 
     imgZoom.height
     container.style.opacity = '1'
-}
+}
+
+const fileToDataURL = (file: Blob): Promise<any> => {
+    return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onloadend = (e) => resolve((e.target as FileReader).result)
+        reader.readAsDataURL(file)
+    })
+}
+
+const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
+    return new Promise((resolve) => {
+        const img = new Image()
+        img.onload = () => resolve(img)
+        img.src = dataURL
+    })
+}
+
+const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
+    return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality))
+}
+
+export const compressionFile = async (file: File, type: string, quality = 0.2) => {
+    const fileName = file.name
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d') as CanvasRenderingContext2D
+    const base64 = await fileToDataURL(file)
+    const img = await dataURLToImage(base64)
+    canvas.width = img.width
+    canvas.height = img.height
+    context.clearRect(0, 0, img.width, img.height)
+
+    context.fillStyle = '#fff'
+    context.fillRect(0, 0, img.width, img.height)
+
+    context.drawImage(img, 0, 0, img.width, img.height)
+    const blob = (await canvastoFile(canvas, type, quality)) as Blob
+    return new File([blob], fileName, {
+        type: type
+    })
+}