feat: compress image (#990)

Author: honwhy

apps/web/src/components/CodemirrorEditor/UploadImgDialog.vue

@@ -339,20 +339,26 @@ const options = [
 ]
 
 const imgHost = ref(`default`)
-
+const useCompression = ref(false)
 const activeName = ref(`upload`)
 
 onBeforeMount(() => {
   if (localStorage.getItem(`imgHost`)) {
     imgHost.value = localStorage.getItem(`imgHost`)!
   }
+  const storedCompression = localStorage.getItem(`useCompression`)
+  if (storedCompression !== null) {
+    useCompression.value = storedCompression === `true`
+  }
 })
 
 function changeImgHost() {
   localStorage.setItem(`imgHost`, imgHost.value)
   toast.success(`图床已切换`)
 }
-
+function changeCompression() {
+  localStorage.setItem(`useCompression`, useCompression.value.toString())
+}
 function beforeImageUpload(file: File) {
   // check image
   const checkResult = checkImage(file)
@@ -471,6 +477,16 @@ function emitUploads(file: File) {
               </SelectContent>
             </Select>
           </Label>
+          <Label label="UseCompression">
+            <span class="my-4 block">
+              开启图片压缩
+            </span>
+            <Switch
+              v-model:checked="useCompression"
+              name="UseCompression"
+              @update:checked="changeCompression"
+            />
+          </Label>
           <div
             class="bg-clip-padding mt-4 h-50 relative flex flex-col cursor-pointer items-center justify-evenly border-2 rounded border-dashed transition-colors hover:border-gray-700 hover:bg-gray-400/50 dark:hover:border-gray-200 dark:hover:bg-gray-500/50"
             :class="{

apps/web/src/views/CodemirrorEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Editor } from 'codemirror'
 import type { ComponentPublicInstance } from 'vue'
+import imageCompression from 'browser-image-compression'
 import { fromTextArea } from 'codemirror'
 import { Eye, Pen } from 'lucide-vue-next'
 import {
@@ -189,15 +190,27 @@ function uploaded(imageUrl: string) {
 }
 
 const isImgLoading = ref(false)
-
+async function compressImage(file: File) {
+  const options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true,
+  }
+  const compressedFile = await imageCompression(file, options)
+  return compressedFile
+}
 async function uploadImage(
   file: File,
   cb?: { (url: any, data: string): void, (arg0: unknown): void } | undefined,
   applyUrl?: boolean,
 ) {
   try {
     isImgLoading.value = true
-
+    // compress image if useCompression is true
+    const useCompression = localStorage.getItem(`useCompression`) === `true`
+    if (useCompression) {
+      file = await compressImage(file)
+    }
     const base64Content = await toBase64(file)
     const url = await fileUpload(base64Content, file)
     if (cb) {