feat: add gifzip

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@vueuse/core": "^9.13.0",
     "axios": "^1.5.0",
+    "image-resize": "^1.3.2",
     "imagemin": "^8.0.1",
     "imagemin-jpegtran": "^7.0.0",
     "jpegtran-bin": "^7.0.0",
@@ -47,4 +48,4 @@
     "vite-plugin-style-import": "^2.0.0",
     "vue-tsc": "^0.34.7"
   }
-}
+}

src/router/modules/img.ts

@@ -22,6 +22,13 @@ const ImgRoute: RouteRecordRaw = {
         name: "图片压缩",
       },
     },
+    {
+      path: "/img/gif",
+      component: () => import("/@/views/image/zip/GifZip.vue"),
+      meta: {
+        name: "Gif压缩",
+      },
+    },
   ],
 };
 

src/views/image/zip/GIfZip.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import axios from "axios";
+import { selectFile } from "/@/lib/file/selectFile";
+import { Message } from "@arco-design/web-vue";
+import { IconLoading } from "@arco-design/web-vue/es/icon";
+import ImageResize from "image-resize";
+
+const file = ref<File>();
+const apiKey = import.meta.env.VITE_TINIFY_API_KEY;
+const imgUrl = computed(() => file.value && URL.createObjectURL(file.value));
+const output = ref<any>({});
+const imgSrc = ref<any>("");
+const errorMessage = ref("");
+const loading = ref(false);
+const imageResize = new ImageResize();
+
+async function onUpload() {
+  file.value = await selectFile("image");
+}
+
+async function onZip() {
+  try {
+    let res = await imageResize.play(file.value!);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+function onDownload() {
+  if (!imgSrc.value) return;
+
+  const downloadLink = document.createElement("a");
+
+  downloadLink.href = imgSrc.value;
+  downloadLink.setAttribute("download", file.value?.name!);
+  downloadLink.click();
+}
+
+function bytesToKB(bytes?: number) {
+  return ((bytes || 0) / 1024).toFixed(2) + " kb";
+}
+</script>
+
+<template>
+  <a-space>
+    <a-button @click="onUpload">上传图片</a-button>
+    <a-button v-if="imgUrl" @click="onZip">压缩图片</a-button>
+    <a-button v-if="imgSrc" @click="onDownload">下载</a-button>
+  </a-space>
+
+  <div flex mt-20 border-1 h-500>
+    <div w-45vw border-r-1 p-20>
+      <div v-if="imgUrl">
+        <div pb-10 font-400 fs-20>
+          <span>name: </span>
+          <span>{{ file?.name }}</span>
+        </div>
+        <div pb-20 font-400 fs-20>
+          <span>size: </span>
+          <span>{{ bytesToKB(file?.size) }}</span>
+        </div>
+        <img max-w-full max-h-460 :src="imgUrl" alt="" />
+      </div>
+    </div>
+    <div flex-1 p-20>
+      <div v-if="loading" w-full h-full flex justify-center items-center>
+        <IconLoading size="50" />
+      </div>
+      <div v-if="imgSrc || errorMessage">
+        <div pb-10 font-400 fs-20>
+          <span>name: </span>
+          <span>{{ file?.name }}</span>
+        </div>
+        <div pb-20 font-400 fs-20>
+          <span>size: </span>
+          <span>{{ bytesToKB(output?.size) }}</span>
+        </div>
+        <img v-if="imgSrc" max-w-full max-h-460 :src="imgSrc" alt="" />
+        <span v-else>{{ errorMessage }}</span>
+      </div>
+    </div>
+  </div>
+</template>

vite.config.ts

@@ -8,7 +8,7 @@ import Unocss from "unocss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "/my-tools/",
+  // base: "/my-tools/",
 
   server: {
     port: 3080,