From 36698e89a1d92fd5845981f8d9dc47ae7b85f0f7 Mon Sep 17 00:00:00 2001 From: Lin-arm <85251920+Lin-arm@users.noreply.github.com> Date: Sun, 14 Jun 2026 16:02:26 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20[=E6=9B=B4=E6=8D=A2=E6=88=AA?= =?UTF-8?q?=E5=9B=BE]=E6=96=B0=E5=A2=9E=E6=94=AF=E6=8C=81webp=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在电脑本地将png图片转成webp格式再上传,体积会小很多,画质近乎无损 --- src/components/ChangeScreenshot.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChangeScreenshot.vue b/src/components/ChangeScreenshot.vue index b131735..b46c02e 100644 --- a/src/components/ChangeScreenshot.vue +++ b/src/components/ChangeScreenshot.vue @@ -33,7 +33,7 @@ export default defineComponent({ + \ No newline at end of file diff --git a/src/utils/arrayBufferToImage.ts b/src/utils/arrayBufferToImage.ts index fdaaf2a..dc73ac2 100644 --- a/src/utils/arrayBufferToImage.ts +++ b/src/utils/arrayBufferToImage.ts @@ -1,6 +1,9 @@ +import { detectImageMime } from './imageDetect'; + export default (arrayBuffer: ArrayBuffer): HTMLImageElement => { const arrayBufferView = new Uint8Array(arrayBuffer); - const blob = new Blob([arrayBufferView], { type: 'image/png' }); + const mime = detectImageMime(arrayBuffer) ?? 'image/png'; + const blob = new Blob([arrayBufferView], { type: mime }); const src = (window.URL || window.webkitURL).createObjectURL(blob); const img = document.createElement('img'); img.src = src; diff --git a/src/utils/imageDetect.ts b/src/utils/imageDetect.ts new file mode 100644 index 0000000..514c6b3 --- /dev/null +++ b/src/utils/imageDetect.ts @@ -0,0 +1,22 @@ +/** + * 通过二进制文件头识别 PNG / WebP + */ +export function detectImageMime(buffer: ArrayBuffer): 'image/png' | 'image/webp' | null { + const u8 = new Uint8Array(buffer); + if (u8.length < 12) return null; + + // PNG Magic Number: 89 50 4E 47 + if (u8[0] === 0x89 && u8[1] === 0x50 && u8[2] === 0x4E && u8[3] === 0x47) { + return 'image/png'; + } + + // WebP: RIFF....WEBP + if ( + u8[0] === 0x52 && u8[1] === 0x49 && u8[2] === 0x46 && u8[3] === 0x46 && + u8[8] === 0x57 && u8[9] === 0x45 && u8[10] === 0x42 && u8[11] === 0x50 + ) { + return 'image/webp'; + } + + return null; +} \ No newline at end of file diff --git a/src/utils/indexedDB.ts b/src/utils/indexedDB.ts index 9b33dec..bb6d189 100644 --- a/src/utils/indexedDB.ts +++ b/src/utils/indexedDB.ts @@ -4,6 +4,7 @@ import { saveAs } from 'file-saver'; import { Snapshot, PrimitiveType } from '../types/snapshot'; import { IInspectSettings } from '../types/inspectSettings'; import { AttrList } from '../common/attrList'; +import { detectImageMime } from './imageDetect'; interface EditNodeOption { target: AttrList; @@ -104,7 +105,10 @@ export const getSnapshotZip = async (snapshotId: string): Promise => { const jszip = new JSZip(); jszip.file(`snapshot-${snapshotId}.json`, JSON.stringify(snapshotInfo, undefined, 2)); - jszip.file(`screenshot-${snapshotId}.png`, screenshot); + + const mime = detectImageMime(screenshot) ?? 'image/png'; + const ext = mime === 'image/webp' ? 'webp' : 'png'; + jszip.file(`screenshot-${snapshotId}.${ext}`, screenshot); return await jszip.generateAsync({ type: 'blob' }); }; From b973cc4b68e39059484b94570b18487913abc185 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 7 Aug 2026 16:47:04 +0000 Subject: [PATCH 3/3] chore(actions): check_format_lint --- src/components/ChangeScreenshot.vue | 2 +- src/utils/imageDetect.ts | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/ChangeScreenshot.vue b/src/components/ChangeScreenshot.vue index 7abece5..0309073 100644 --- a/src/components/ChangeScreenshot.vue +++ b/src/components/ChangeScreenshot.vue @@ -41,4 +41,4 @@ export default defineComponent({ input#img { display: none; } - \ No newline at end of file + diff --git a/src/utils/imageDetect.ts b/src/utils/imageDetect.ts index 514c6b3..5fdb435 100644 --- a/src/utils/imageDetect.ts +++ b/src/utils/imageDetect.ts @@ -6,17 +6,23 @@ export function detectImageMime(buffer: ArrayBuffer): 'image/png' | 'image/webp' if (u8.length < 12) return null; // PNG Magic Number: 89 50 4E 47 - if (u8[0] === 0x89 && u8[1] === 0x50 && u8[2] === 0x4E && u8[3] === 0x47) { + if (u8[0] === 0x89 && u8[1] === 0x50 && u8[2] === 0x4e && u8[3] === 0x47) { return 'image/png'; } // WebP: RIFF....WEBP if ( - u8[0] === 0x52 && u8[1] === 0x49 && u8[2] === 0x46 && u8[3] === 0x46 && - u8[8] === 0x57 && u8[9] === 0x45 && u8[10] === 0x42 && u8[11] === 0x50 + u8[0] === 0x52 && + u8[1] === 0x49 && + u8[2] === 0x46 && + u8[3] === 0x46 && + u8[8] === 0x57 && + u8[9] === 0x45 && + u8[10] === 0x42 && + u8[11] === 0x50 ) { return 'image/webp'; } return null; -} \ No newline at end of file +}