vue3-image-compressor 1.0.4

package/src/utils/file.ts

@@ -0,0 +1,48 @@
+/**
+ * 文件工具函数
+ */
+
+/**
+ * 格式化文件大小
+ */
+export function formatBytes(bytes: number, decimals = 2): string {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+/**
+ * 计算节省百分比
+ */
+export function calculateSavings(originalSize: number, compressedSize: number): number {
+  if (originalSize === 0) return 0;
+  return Math.round(((originalSize - compressedSize) / originalSize) * 100);
+}
+
+/**
+ * 生成压缩后的文件名
+ */
+export function generateCompressedFilename(
+  originalName: string,
+  extension: string
+): string {
+  const baseName = originalName.replace(/\.[^.]+$/, '');
+  return `${baseName}_compressed.${extension}`;
+}
+
+/**
+ * 创建 Blob URL
+ */
+export function createBlobUrl(blob: Blob): string {
+  return URL.createObjectURL(blob);
+}
+
+/**
+ * 释放 Blob URL
+ */
+export function revokeBlobUrl(url: string): void {
+  URL.revokeObjectURL(url);
+}

package/src/utils/image.ts

@@ -0,0 +1,90 @@
+/**
+ * 图像工具函数
+ */
+
+/**
+ * 从 Blob 解码图片为 ImageData
+ * 使用浏览器内置的 createImageBitmap
+ */
+export async function blobToImageData(blob: Blob): Promise<ImageData> {
+  const bitmap = await createImageBitmap(blob);
+  const canvas = document.createElement('canvas');
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.drawImage(bitmap, 0, 0);
+  return ctx.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+/**
+ * ImageData 转 Blob（用于浏览器编码器如 JPEG/PNG）
+ */
+export async function imageDataToBlob(
+  imageData: ImageData,
+  mimeType: string,
+  quality?: number
+): Promise<Blob> {
+  const canvas = document.createElement('canvas');
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.putImageData(imageData, 0, 0);
+  return new Promise((resolve) => {
+    canvas.toBlob(
+      (blob) => resolve(blob!),
+      mimeType,
+      quality
+    );
+  });
+}
+
+/**
+ * 从文件获取图片尺寸
+ */
+export function getImageDimensions(file: File): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = reject;
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+/**
+ * 检测图片 MIME 类型
+ */
+export async function sniffMimeType(blob: Blob): Promise<string> {
+  const header = new Uint8Array(await blob.slice(0, 4).arrayBuffer());
+  if (header[0] === 0x89 && header[1] === 0x50) return 'image/png';
+  if (header[0] === 0xff && header[1] === 0xd8) return 'image/jpeg';
+  if (header[0] === 0x47 && header[1] === 0x49) return 'image/gif';
+  if (header[0] === 0x52 && header[1] === 0x49) return 'image/webp';
+  if (header[0] === 0x00 && header[1] === 0x00) return 'image/avif';
+  return blob.type || 'image/jpeg';
+}
+
+/**
+ * 检查浏览器是否支持解码某图片格式
+ */
+export function canDecodeImageType(mimeType: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => resolve(false);
+    img.src = `data:${mimeType};base64,`;
+  });
+}
+
+/**
+ * ArrayBuffer 转 File
+ */
+export function arrayBufferToFile(
+  buffer: ArrayBuffer,
+  filename: string,
+  mimeType: string
+): File {
+  return new File([buffer], filename, { type: mimeType });
+}

package/src/workers/imageWorker.ts

@@ -0,0 +1,107 @@
+/**
+ * Web Worker 入口
+ * 对标 Squoosh: src/features-worker/index.ts
+ * 聚合所有编解码器，通过消息传递暴露 API
+ */
+
+import type { WorkerApi } from '../types/worker';
+
+// 简化版：使用 postMessage 通信
+// 实际使用 comlink 时会更简洁
+
+const ctx = self as DedicatedWorkerGlobalScope;
+
+// 缓存 WASM 模块
+const moduleCache = new Map<string, any>();
+
+async function getModule(name: string, factory: any) {
+  if (!moduleCache.has(name)) {
+    moduleCache.set(name, factory());
+  }
+  return moduleCache.get(name);
+}
+
+// 模拟编码器实现（实际项目中加载 WASM）
+const workerApi: WorkerApi = {
+  // Decoders
+  async avifDecode(blob: Blob): Promise<ImageData> {
+    // 实际加载 codecs/avif/dec/avif_dec.js
+    throw new Error('AVIF decode not implemented in worker');
+  },
+  async jxlDecode(blob: Blob): Promise<ImageData> {
+    throw new Error('JXL decode not implemented in worker');
+  },
+  async qoiDecode(blob: Blob): Promise<ImageData> {
+    throw new Error('QOI decode not implemented in worker');
+  },
+  async webpDecode(blob: Blob): Promise<ImageData> {
+    throw new Error('WebP decode not implemented in worker');
+  },
+  async wp2Decode(blob: Blob): Promise<ImageData> {
+    throw new Error('WebP2 decode not implemented in worker');
+  },
+
+  // Encoders
+  async avifEncode(data: ImageData, options: any): Promise<Uint8Array> {
+    throw new Error('AVIF encode not implemented in worker');
+  },
+  async jxlEncode(data: ImageData, options: any): Promise<Uint8Array> {
+    throw new Error('JXL encode not implemented in worker');
+  },
+  async mozjpegEncode(data: ImageData, options: any): Promise<Uint8Array> {
+    // 实际加载 codecs/mozjpeg/enc/mozjpeg_enc.js
+    // const module = await initEmscriptenModule(mozjpeg_enc);
+    // return module.encode(data.data, data.width, data.height, options);
+    throw new Error('MozJPEG encode not implemented in worker');
+  },
+  async oxipngEncode(data: ImageData, options: any): Promise<Uint8Array> {
+    throw new Error('OxiPNG encode not implemented in worker');
+  },
+  async qoiEncode(data: ImageData, options: any): Promise<Uint8Array> {
+    throw new Error('QOI encode not implemented in worker');
+  },
+  async webpEncode(data: ImageData, options: any): Promise<Uint8Array> {
+    throw new Error('WebP encode not implemented in worker');
+  },
+  async wp2Encode(data: ImageData, options: any): Promise<Uint8Array> {
+    throw new Error('WebP2 encode not implemented in worker');
+  },
+
+  // Preprocessors
+  async rotate(data: ImageData, options: any): Promise<ImageData> {
+    // 实际加载 codecs/rotate/rotate.js
+    throw new Error('Rotate not implemented in worker');
+  },
+
+  // Processors
+  async quantize(data: ImageData, options: any): Promise<ImageData> {
+    // 实际加载 codecs/imagequant/imagequant.js
+    throw new Error('Quantize not implemented in worker');
+  },
+  async resize(data: ImageData, options: any): Promise<ImageData> {
+    // 实际加载 codecs/resize/resize.js
+    throw new Error('Resize not implemented in worker');
+  },
+};
+
+// 消息处理
+ctx.addEventListener('message', async (event) => {
+  const { id, method, args } = event.data;
+
+  try {
+    const fn = (workerApi as any)[method];
+    if (!fn) {
+      throw new Error(`Unknown method: ${method}`);
+    }
+    const result = await fn.apply(workerApi, args);
+    ctx.postMessage({ id, result, error: null });
+  } catch (err) {
+    ctx.postMessage({
+      id,
+      result: null,
+      error: err instanceof Error ? err.message : String(err),
+    });
+  }
+});
+
+export default workerApi;

package/src/workers/utils/emscripten.ts

@@ -0,0 +1,16 @@
+/**
+ * Emscripten WASM 模块初始化工具
+ * 对标 Squoosh: src/features/worker-utils/index.ts
+ */
+
+export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
+  moduleFactory: EmscriptenWasm.ModuleFactory<T>
+): Promise<T> {
+  return moduleFactory({
+    noInitialRun: true,
+  });
+}
+
+export function blobToArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
+  return new Response(blob).arrayBuffer();
+}