feat: use png

gkd-kit · Jan 24, 2025 · 49619ed · 49619ed
1 parent 11ed4bf
commit 49619ed
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 38 deletions.
diff --git a/src/components/ActionCard.vue b/src/components/ActionCard.vue
@@ -3,7 +3,7 @@ import { showTextDLg, waitShareAgree } from '@/utils/dialog';
 import { message } from '@/utils/discrete';
 import {
   exportSnapshotAsImportId,
-  exportSnapshotAsJpg,
+  exportSnapshotAsImage,
   exportSnapshotAsImageId,
   exportSnapshotAsZip,
 } from '@/utils/export';
@@ -34,7 +34,7 @@ const props = withDefaults(
 const router = useRouter();
 const { snapshotImportId, snapshotImageId } = useStorageStore();
 
-const exportJpg = useTask(async () => exportSnapshotAsJpg(props.snapshot));
+const exportJpg = useTask(async () => exportSnapshotAsImage(props.snapshot));
 const exportZip = useTask(async () => exportSnapshotAsZip(props.snapshot));
 
 const previewUrl = computed(() => {

diff --git a/src/utils/export.ts b/src/utils/export.ts
@@ -28,40 +28,32 @@ export const exportSnapshotAsZip = async (snapshot: Snapshot) => {
   saveAs(await snapshotAsZip(snapshot), fileName);
 };
 
-export const snapshotAsJpg = async (snapshot: Snapshot) => {
-  const imgBf = (await screenshotStorage.getItem(snapshot.id))!;
-  const jpgBlob = await new Promise<Blob>((res, rej) => {
-    new Compressor(new Blob([imgBf], { type: 'image/png' }), {
-      quality: 0.75,
-      convertSize: 200_000,
-      success(file) {
-        res(file);
-      },
-      error(error) {
-        rej(error);
-      },
-    });
-  });
-  const content = new Blob([jpgBlob], { type: 'image/jpeg' });
-  return content;
-};
-
-export const exportSnapshotAsJpg = async (snapshot: Snapshot) => {
-  const fileName = `snapshot-${snapshot.id}.jpg`;
-  saveAs(await snapshotAsJpg(snapshot), fileName);
+export const exportSnapshotAsImage = async (snapshot: Snapshot) => {
+  const fileName = `snapshot-${snapshot.id}.png`;
+  saveAs(
+    new Blob([(await screenshotStorage.getItem(snapshot.id))!], {
+      type: 'image/png',
+    }),
+    fileName,
+  );
 };
 
-export const batchJpgDownloadZip = async (snapshots: Snapshot[]) => {
+export const batchImageDownloadZip = async (snapshots: Snapshot[]) => {
   const zip = new (await JSZipAsync)();
   for (const snapshot of snapshots) {
     await delay();
-    zip.file(snapshot.id + `.jpg`, snapshotAsJpg(snapshot));
+    zip.file(
+      snapshot.id + `.png`,
+      new Blob([(await screenshotStorage.getItem(snapshot.id))!], {
+        type: 'image/png',
+      }),
+    );
   }
   const batchZipFile = await zip.generateAsync({
     type: 'blob',
     compression: `STORE`,
   });
-  saveAs(batchZipFile, `batch-png-${snapshots.length}.zip`);
+  saveAs(batchZipFile, `batch-png-${Date.now()}.zip`);
 };
 
 export const batchZipDownloadZip = async (snapshots: Snapshot[]) => {
@@ -74,15 +66,30 @@ export const batchZipDownloadZip = async (snapshots: Snapshot[]) => {
     type: 'blob',
     compression: `STORE`,
   });
-  saveAs(batchZipFile, `batch-zip-${snapshots.length}.zip`);
+  saveAs(batchZipFile, `batch-zip-${Date.now()}.zip`);
+};
+
+const comporessPngToJpg = async (imgBf: ArrayBuffer): Promise<Blob> => {
+  return new Promise<Blob>((res, rej) => {
+    new Compressor(new Blob([imgBf], { type: 'image/png' }), {
+      quality: 0.75,
+      convertSize: 200_000,
+      success(file) {
+        res(file);
+      },
+      error(error) {
+        rej(error);
+      },
+    });
+  });
 };
 
 export const exportSnapshotAsImageId = async (snapshot: Snapshot) => {
   const { snapshotImageId } = useStorageStore();
   return (
     snapshotImageId[snapshot.id] ??
     uploadAsset(
-      await snapshotAsJpg(snapshot).then((r) => r.arrayBuffer()),
+      await comporessPngToJpg((await screenshotStorage.getItem(snapshot.id))!),
       'file.jpg',
     ).then((r) => {
       const imageId = getImageId(r.href);

diff --git a/src/utils/github.ts b/src/utils/github.ts
@@ -5,12 +5,12 @@ import { enhanceFetch } from './fetch';
 export type GithubPoliciesAsset = PoliciesAsset;
 
 export const uploadAsset = async (
-  bf: ArrayBuffer,
+  fileBit: ArrayBuffer | Blob,
   name: string,
 ): Promise<PoliciesAsset> => {
   return await uploadPoliciesAssets({
     repositoryId: '661952005',
-    file: new File([bf], name),
+    file: new File([fileBit], name),
     fetch: enhanceFetch,
   }).catch(async (e) => {
     if (e instanceof UploadError) {

diff --git a/src/views/home/HomePage.vue b/src/views/home/HomePage.vue
@@ -6,7 +6,7 @@ import { dialog } from '@/utils/discrete';
 import {
   batchCreateImageId,
   batchCreateZipUrl,
-  batchJpgDownloadZip,
+  batchImageDownloadZip,
   batchZipDownloadZip,
 } from '@/utils/export';
 import { importFromLocal, importFromNetwork } from '@/utils/import';
@@ -202,14 +202,14 @@ const batchDelete = useTask(async () => {
   );
   await updateSnapshots();
 });
-const batchDownloadJpg = useTask(async () => {
-  await batchJpgDownloadZip(await checkedSnapshots());
+const batchDownloadImage = useTask(async () => {
+  await batchImageDownloadZip(await checkedSnapshots());
 });
 const batchDownloadZip = useTask(async () => {
   await batchZipDownloadZip(await checkedSnapshots());
 });
 
-const batchShareJpgUrl = useTask(async () => {
+const batchShareImageUrl = useTask(async () => {
   await waitShareAgree();
   const imageIds = await batchCreateImageId(await checkedSnapshots());
   showTextDLg({
@@ -265,8 +265,8 @@ const settingsDlgShow = shallowRef(false);
                 批量下载-快照
               </NButton>
               <NButton
-                @click="batchDownloadJpg.invoke"
-                :loading="batchDownloadJpg.loading"
+                @click="batchDownloadImage.invoke"
+                :loading="batchDownloadImage.loading"
               >
                 批量下载-图片
               </NButton>
@@ -284,8 +284,8 @@ const settingsDlgShow = shallowRef(false);
                 批量生成链接-快照
               </NButton>
               <NButton
-                @click="batchShareJpgUrl.invoke"
-                :loading="batchShareJpgUrl.loading"
+                @click="batchShareImageUrl.invoke"
+                :loading="batchShareImageUrl.loading"
               >
                 批量生成链接-图片
               </NButton>