feat: png 命名为 jpg

gkd-kit · Oct 13, 2023 · ca0815e · ca0815e
1 parent 52524aa
commit ca0815e
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 51 deletions.
diff --git a/src/components/ActionCard.vue b/src/components/ActionCard.vue
@@ -2,21 +2,21 @@
 import { showTextDLg } from '@/utils/dialog';
 import { message } from '@/utils/discrete';
 import {
-  exportSnapshotAsPng,
-  exportSnapshotAsPngUrl,
+  exportSnapshotAsJpg,
+  exportSnapshotAsJpgUrl,
   exportSnapshotAsZip,
   exportSnapshotAsZipUrl,
 } from '@/utils/export';
 import { delay } from '@/utils/others';
 import {
-  githubPngStorage,
-  snapshotStorage,
+  githubJpgStorage,
   githubZipStorage,
+  snapshotStorage,
 } from '@/utils/storage';
 import { useTask } from '@/utils/task';
 import { Snapshot } from '@/utils/types';
-import { githubUrlToSelfUrl, githubZipUrlReg } from '@/utils/url';
-import { NButton, NPopover, NSpace, NIcon } from 'naive-ui';
+import { githubUrlToSelfUrl } from '@/utils/url';
+import { NButton, NIcon, NPopover, NSpace } from 'naive-ui';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -40,8 +40,8 @@ const props = withDefaults(
 
 const router = useRouter();
 
-const exportPng = useTask(async () =>
-  exportSnapshotAsPng((await snapshotStorage.getItem(props.snapshot.id))!),
+const exportJpg = useTask(async () =>
+  exportSnapshotAsJpg((await snapshotStorage.getItem(props.snapshot.id))!),
 );
 const exportZip = useTask(async () =>
   exportSnapshotAsZip((await snapshotStorage.getItem(props.snapshot.id))!),
@@ -54,8 +54,8 @@ const previewUrl = computed(() => {
   }).href;
 });
 
-const exportPngUrl = useTask(async () => {
-  const pngUrl = await exportSnapshotAsPngUrl(
+const exportJpgUrl = useTask(async () => {
+  const pngUrl = await exportSnapshotAsJpgUrl(
     (await snapshotStorage.getItem(props.snapshot.id))!,
   );
   showTextDLg({
@@ -140,7 +140,7 @@ const copy = async (content: string) => {
         </NButton>
       </template>
       <NSpace vertical>
-        <NButton @click="exportPng.invoke" :loading="exportPng.loading">
+        <NButton @click="exportJpg.invoke" :loading="exportJpg.loading">
           下载-jpg
         </NButton>
         <NButton @click="exportZip.invoke" :loading="exportZip.loading">
@@ -170,15 +170,15 @@ const copy = async (content: string) => {
       </template>
       <NSpace vertical>
         <NButton
-          v-if="githubPngStorage[snapshot.id]"
-          @click="copy(githubPngStorage[snapshot.id])"
+          v-if="githubJpgStorage[snapshot.id]"
+          @click="copy(githubJpgStorage[snapshot.id])"
         >
           复制链接-jpg
         </NButton>
         <NButton
           v-else
-          @click="exportPngUrl.invoke"
-          :loading="exportPngUrl.loading"
+          @click="exportJpgUrl.invoke"
+          :loading="exportJpgUrl.loading"
         >
           生成链接-jpg
         </NButton>

diff --git a/src/utils/export.ts b/src/utils/export.ts
@@ -4,7 +4,7 @@ import pLimit from 'p-limit';
 import { uploadPoliciesAssets } from './github';
 import { delay } from './others';
 import {
-  githubPngStorage,
+  githubJpgStorage,
   githubZipStorage,
   screenshotStorage,
   urlStorage,
@@ -30,7 +30,7 @@ export const exportSnapshotAsZip = async (snapshot: Snapshot) => {
   saveAs(await snapshotAsZip(snapshot), fileName);
 };
 
-export const snapshotAsPng = async (snapshot: Snapshot) => {
+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' }), {
@@ -54,16 +54,16 @@ export const snapshotAsPng = async (snapshot: Snapshot) => {
   return content;
 };
 
-export const exportSnapshotAsPng = async (snapshot: Snapshot) => {
+export const exportSnapshotAsJpg = async (snapshot: Snapshot) => {
   const fileName = `snapshot-${snapshot.id}.jpg`;
-  saveAs(await snapshotAsPng(snapshot), fileName);
+  saveAs(await snapshotAsJpg(snapshot), fileName);
 };
 
-export const batchPngDownloadZip = async (snapshots: Snapshot[]) => {
+export const batchJpgDownloadZip = async (snapshots: Snapshot[]) => {
   const zip = new JSZip();
   for (const snapshot of snapshots) {
     await delay();
-    zip.file(snapshot.id + `.jpg`, snapshotAsPng(snapshot));
+    zip.file(snapshot.id + `.jpg`, snapshotAsJpg(snapshot));
   }
   const batchZipFile = await zip.generateAsync({
     type: 'blob',
@@ -85,16 +85,16 @@ export const batchZipDownloadZip = async (snapshots: Snapshot[]) => {
   saveAs(batchZipFile, `batch-zip-${snapshots.length}.zip`);
 };
 
-export const exportSnapshotAsPngUrl = async (snapshot: Snapshot) => {
+export const exportSnapshotAsJpgUrl = async (snapshot: Snapshot) => {
   return (
-    githubPngStorage[snapshot.id] ??
+    githubJpgStorage[snapshot.id] ??
     uploadPoliciesAssets(
-      await snapshotAsPng(snapshot).then((r) => r.arrayBuffer()),
+      await snapshotAsJpg(snapshot).then((r) => r.arrayBuffer()),
       'file.jpg',
       'image/jpeg',
     ).then((r) => {
       // urlStorage[r.href] = snapshot.id;
-      githubPngStorage[snapshot.id] = r.href;
+      githubJpgStorage[snapshot.id] = r.href;
       return r.href;
     })
   );
@@ -115,11 +115,11 @@ export const exportSnapshotAsZipUrl = async (snapshot: Snapshot) => {
   );
 };
 
-export const batchCreatePngUrl = async (snapshots: Snapshot[]) => {
+export const batchCreateJpgUrl = async (snapshots: Snapshot[]) => {
   const limit = pLimit(3);
   return (
     await Promise.allSettled(
-      snapshots.map((s) => limit(() => exportSnapshotAsPngUrl(s))),
+      snapshots.map((s) => limit(() => exportSnapshotAsJpgUrl(s))),
     )
   ).reduce<string[]>((p, c) => {
     if (c.status == 'fulfilled') {

diff --git a/src/utils/file_type.ts b/src/utils/file_type.ts
@@ -8,12 +8,7 @@ const blobStartWith = async (a: Blob, b: Uint8Array) => {
   const bf = await a.slice(0, b.length).arrayBuffer();
   return eqU8(new Uint8Array(bf), b);
 };
-const pngHeader = new Uint8Array([
-  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
-]);
 const zipHeader = new Uint8Array([0x50, 0x4b, 0x03, 0x04]);
 
-export const isPngBf = (bf: ArrayBuffer) => startWith(bf, pngHeader);
-export const isPngBlob = async (blob: Blob) => blobStartWith(blob, pngHeader);
 export const isZipBf = (bf: ArrayBuffer) => startWith(bf, zipHeader);
 export const isZipBlob = async (blob: Blob) => blobStartWith(blob, zipHeader);
diff --git a/src/utils/github.ts b/src/utils/github.ts
@@ -1,5 +1,4 @@
 import { enhanceFetch } from './fetch';
-import { isPngBf, isZipBf } from './file_type';
 import { obj2form } from './others';
 import store from './store';
 

diff --git a/src/utils/node.ts b/src/utils/node.ts
@@ -1,4 +1,3 @@
-import { snapshotAsPng } from './export';
 import type { Device, RawNode, SizeExt, Snapshot } from './types';
 
 export const listToTree = (nodes: RawNode[]) => {

diff --git a/src/utils/storage.ts b/src/utils/storage.ts
@@ -101,9 +101,9 @@ export const cacheStorage = useStorage({
 
 export const urlStorage = useReactiveStorage<Record<string, number>>(`url`, {});
 
-export const githubPngStorage = useReactiveStorage<
+export const githubJpgStorage = useReactiveStorage<
   Record<number, string>
->(`githubPng`, {});
+>(`githubJpg`, {});
 
 export const githubZipStorage = useReactiveStorage<
   Record<number, string>

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -4,9 +4,9 @@ import { toValidURL } from '@/utils/check';
 import { showTextDLg } from '@/utils/dialog';
 import { dialog } from '@/utils/discrete';
 import {
-  batchCreatePngUrl,
+  batchCreateJpgUrl,
   batchCreateZipUrl,
-  batchPngDownloadZip,
+  batchJpgDownloadZip,
   batchZipDownloadZip,
 } from '@/utils/export';
 import { importFromLocal, importFromNetwork } from '@/utils/import';
@@ -210,15 +210,15 @@ const batchDelete = useTask(async () => {
   );
   await updateSnapshots();
 });
-const batchDownloadPng = useTask(async () => {
-  await batchPngDownloadZip(await checkedSnapshots());
+const batchDownloadJpg = useTask(async () => {
+  await batchJpgDownloadZip(await checkedSnapshots());
 });
 const batchDownloadZip = useTask(async () => {
   await batchZipDownloadZip(await checkedSnapshots());
 });
 
-const batchSharePngUrl = useTask(async () => {
-  const pngUrls = await batchCreatePngUrl(await checkedSnapshots());
+const batchShareJpgUrl = useTask(async () => {
+  const pngUrls = await batchCreateJpgUrl(await checkedSnapshots());
   showTextDLg({
     content: pngUrls.map((s) => githubUrlToSelfUrl(s)).join(`\n`) + `\n`,
   });
@@ -280,8 +280,8 @@ const batchShareZipUrl = useTask(async () => {
             </template>
             <NSpace vertical>
               <NButton
-                @click="batchDownloadPng.invoke"
-                :loading="batchDownloadPng.loading"
+                @click="batchDownloadJpg.invoke"
+                :loading="batchDownloadJpg.loading"
               >
                 批量下载-jpg
               </NButton>
@@ -299,8 +299,8 @@ const batchShareZipUrl = useTask(async () => {
             </template>
             <NSpace vertical>
               <NButton
-                @click="batchSharePngUrl.invoke"
-                :loading="batchSharePngUrl.loading"
+                @click="batchShareJpgUrl.invoke"
+                :loading="batchShareJpgUrl.loading"
               >
                 批量生成链接-jpg
               </NButton>

diff --git a/src/views/ImportPage.vue b/src/views/ImportPage.vue
@@ -4,7 +4,7 @@ import { loadingBar, message } from '@/utils/discrete';
 import { importFromNetwork } from '@/utils/import';
 import { delay } from '@/utils/others';
 import { githubZipStorage } from '@/utils/storage';
-import { githubPngStorage } from '@/utils/storage';
+import { githubJpgStorage } from '@/utils/storage';
 import { urlStorage, snapshotStorage } from '@/utils/storage';
 import { githubImageUrlReg, githubZipUrlReg } from '@/utils/url';
 import { onMounted, shallowRef } from 'vue';
@@ -53,7 +53,7 @@ onMounted(async () => {
         if (importUrl.match(githubZipUrlReg)) {
           githubZipStorage[snapshot.id] = importUrl;
         } else if (importUrl.match(githubImageUrlReg)) {
-          githubPngStorage[snapshot.id] = importUrl;
+          githubJpgStorage[snapshot.id] = importUrl;
         }
         loading.value = false;
         await delay(500);

diff --git a/src/views/SnapshotPage.vue b/src/views/SnapshotPage.vue
@@ -17,7 +17,7 @@ import { computed, shallowRef, watchEffect } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useTitle } from '@vueuse/core';
 import { gmOk } from '@/utils/gm';
-import { exportSnapshotAsPngUrl, exportSnapshotAsZipUrl } from '@/utils/export';
+import { exportSnapshotAsJpgUrl, exportSnapshotAsZipUrl } from '@/utils/export';
 
 const route = useRoute();
 const router = useRouter();
@@ -44,9 +44,9 @@ watchEffect(async () => {
   if (gmOk()) {
     // 静默生成 jpg/zip
     setTimeout(async () => {
-      await exportSnapshotAsPngUrl(localSnapshot);
+      exportSnapshotAsJpgUrl(localSnapshot);
       if (!githubZipStorage[localSnapshot.id]) {
-        await exportSnapshotAsZipUrl(
+        exportSnapshotAsZipUrl(
           (await snapshotStorage.getItem(snapshotId.value))!,
         );
       }