feat: [更换截图]新增支持webp图片格式

src/components/ChangeScreenshot.vue

@@ -9,17 +9,18 @@ export default defineComponent({
   methods: {
     async getImg() {
       const inputElement = document.querySelector('#img') as HTMLInputElement;
+      const fileList = inputElement.files;
+      if (!fileList || fileList.length === 0) return;
 
-      const fileList = inputElement.files!;
       const imageArrayBuffer = await fileList[0].arrayBuffer();
-
       await replaceScreenshot(await getSnapshotId(), imageArrayBuffer);
 
       snackbar({
         message: '更换截图成功！刷新页面即可看见更改',
         placement: 'top',
       });
 
+      inputElement.value = '';
       send('closePage');
     },
     cancel() {
@@ -33,7 +34,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <input type="file" id="img" accept=".png" @change="getImg" @cancel="cancel" />
+  <input type="file" id="img" accept="image/png,image/webp" @change="getImg" @cancel="cancel" />
 </template>
 
 <style>

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;

src/utils/imageDetect.ts

@@ -0,0 +1,28 @@
+/**
+ * 通过二进制文件头识别 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;
+}

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<Blob> => {
 
   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' });
 };