vue3-image-compressor 1.0.4

package/src/composables/useEncoderRegistry.ts

@@ -0,0 +1,70 @@
+/**
+ * 编码器注册表 Composable
+ * 管理编码器列表、默认选项和当前选项
+ */
+
+import { ref, computed } from 'vue';
+import type { EncoderType, EncoderOptions } from '../types/encoder';
+import { ENCODER_REGISTRY, DEFAULT_ENCODER_OPTIONS, ENCODER_LIST } from '../constants/encoders';
+
+export function useEncoderRegistry() {
+  const selectedEncoder = ref<EncoderType>('mozJPEG');
+  const encoderOptions = ref<Record<string, any>>({});
+
+  // 当前编码器元数据
+  const currentMeta = computed(() => ENCODER_REGISTRY[selectedEncoder.value]);
+
+  // 当前编码器默认选项
+  const currentDefaults = computed(() =>
+    DEFAULT_ENCODER_OPTIONS[selectedEncoder.value]
+  );
+
+  // 所有可用编码器列表
+  const availableEncoders = computed(() =>
+    ENCODER_LIST.map((type) => ({
+      type,
+      label: ENCODER_REGISTRY[type].label,
+      mimeType: ENCODER_REGISTRY[type].mimeType,
+      extension: ENCODER_REGISTRY[type].extension,
+    }))
+  );
+
+  /**
+   * 切换编码器时重置选项
+   */
+  function selectEncoder(type: EncoderType) {
+    selectedEncoder.value = type;
+    encoderOptions.value = { ...DEFAULT_ENCODER_OPTIONS[type] };
+  }
+
+  /**
+   * 更新编码器选项
+   */
+  function updateOption(key: string, value: any) {
+    encoderOptions.value = {
+      ...encoderOptions.value,
+      [key]: value,
+    };
+  }
+
+  /**
+   * 重置为默认选项
+   */
+  function resetOptions() {
+    encoderOptions.value = { ...currentDefaults.value };
+  }
+
+  // 初始化
+  resetOptions();
+
+  return {
+    selectedEncoder,
+    encoderOptions,
+    currentMeta,
+    currentDefaults,
+    availableEncoders,
+    selectEncoder,
+    updateOption,
+    resetOptions,
+  };
+}

package/src/composables/useWorker.ts

@@ -0,0 +1,132 @@
+/**
+ * Worker 封装 Composable
+ * 对标 Squoosh: src/client/lazy-app/worker-bridge/index.ts
+ * 使用 comlink 封装 Web Worker 通信
+ */
+
+import { ref, onUnmounted } from 'vue';
+import type { WorkerApi } from '../types/worker';
+
+// Worker 空闲超时时间（ms）
+const WORKER_TIMEOUT = 10000;
+
+export function useWorker() {
+  const isReady = ref(false);
+  const isLoading = ref(false);
+  const error = ref<Error | null>(null);
+
+  let worker: Worker | null = null;
+  let workerApi: WorkerApi | null = null;
+  let timeoutId: number | null = null;
+
+  /**
+   * 启动 Worker
+   */
+  function startWorker() {
+    if (worker) return;
+
+    try {
+      isLoading.value = true;
+      // 使用 Vite 的 ?worker 导入方式
+      // 实际项目中需要配置 worker 文件路径
+      worker = new Worker(
+        new URL('../workers/imageWorker.ts', import.meta.url),
+        { type: 'module' }
+      );
+      isReady.value = true;
+      error.value = null;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error('Failed to start worker');
+      console.error('Worker start failed:', err);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  /**
+   * 终止 Worker
+   */
+  function terminateWorker() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (worker) {
+      worker.terminate();
+      worker = null;
+      workerApi = null;
+      isReady.value = false;
+    }
+  }
+
+  /**
+   * 设置 Worker 空闲超时回收
+   */
+  function scheduleTermination() {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      terminateWorker();
+    }, WORKER_TIMEOUT);
+  }
+
+  /**
+   * 获取 Worker API（懒加载）
+   */
+  async function getWorkerApi(): Promise<WorkerApi> {
+    if (!worker) {
+      startWorker();
+    }
+    if (!worker) {
+      throw new Error('Worker failed to initialize');
+    }
+    // 简化版：直接返回 worker 的 postMessage API
+    // 实际使用 comlink 时：return wrap<WorkerApi>(worker);
+    return worker as any;
+  }
+
+  /**
+   * 执行 Worker 任务（带取消支持）
+   */
+  async function executeTask<T>(
+    signal: AbortSignal,
+    task: () => Promise<T>
+  ): Promise<T> {
+    if (signal.aborted) {
+      throw new DOMException('AbortError', 'AbortError');
+    }
+
+    clearTimeout(timeoutId!);
+
+    return new Promise((resolve, reject) => {
+      const onAbort = () => {
+        terminateWorker();
+        reject(new DOMException('AbortError', 'AbortError'));
+      };
+
+      signal.addEventListener('abort', onAbort);
+
+      task()
+        .then(resolve)
+        .catch(reject)
+        .finally(() => {
+          signal.removeEventListener('abort', onAbort);
+          scheduleTermination();
+        });
+    });
+  }
+
+  // 组件卸载时清理 Worker
+  onUnmounted(() => {
+    terminateWorker();
+  });
+
+  return {
+    isReady,
+    isLoading,
+    error,
+    worker,
+    getWorkerApi,
+    executeTask,
+    terminateWorker,
+  };
+}

package/src/constants/encoders.ts

@@ -0,0 +1,137 @@
+/*
+ * 编码器常量配置
+ * 对标 Squoosh: src/features/encoders/x/shared/meta.ts
+ */
+
+import type { EncoderMeta, EncoderType } from '../types/encoder';
+
+export const ENCODER_REGISTRY: Record<EncoderType, EncoderMeta> = {
+  mozJPEG: {
+    label: 'MozJPEG',
+    mimeType: 'image/jpeg',
+    extension: 'jpg',
+  },
+  webP: {
+    label: 'WebP',
+    mimeType: 'image/webp',
+    extension: 'webp',
+  },
+  avif: {
+    label: 'AVIF',
+    mimeType: 'image/avif',
+    extension: 'avif',
+  },
+  jxl: {
+    label: 'JPEG XL',
+    mimeType: 'image/jxl',
+    extension: 'jxl',
+  },
+  oxiPNG: {
+    label: 'OxiPNG',
+    mimeType: 'image/png',
+    extension: 'png',
+  },
+  browserJPEG: {
+    label: 'Browser JPEG',
+    mimeType: 'image/jpeg',
+    extension: 'jpg',
+  },
+  browserPNG: {
+    label: 'Browser PNG',
+    mimeType: 'image/png',
+    extension: 'png',
+  },
+  browserGIF: {
+    label: 'Browser GIF',
+    mimeType: 'image/gif',
+    extension: 'gif',
+  },
+  qoi: {
+    label: 'QOI',
+    mimeType: 'image/qoi',
+    extension: 'qoi',
+  },
+  wp2: {
+    label: 'WebP2',
+    mimeType: 'image/webp2',
+    extension: 'wp2',
+  },
+};
+
+export const DEFAULT_ENCODER_OPTIONS: Record<EncoderType, Record<string, any>> = {
+  mozJPEG: {
+    quality: 75,
+    baseline: false,
+    arithmetic: false,
+    progressive: true,
+    optimize_coding: true,
+    smoothing: 0,
+    color_space: 3,
+    quant_table: 3,
+    trellis_multipass: false,
+    trellis_opt_zero: false,
+    trellis_opt_table: false,
+    trellis_loops: 1,
+    auto_subsample: true,
+    chroma_subsample: 2,
+    separate_chroma_quality: false,
+    chroma_quality: 75,
+  },
+  webP: {
+    quality: 75,
+    target_size: 0,
+    target_PSNR: 0,
+    method: 4,
+    sns_strength: 50,
+    filter_strength: 60,
+    filter_sharpness: 0,
+    filter_type: 1,
+    partitions: 0,
+    segments: 4,
+    pass: 1,
+    show_compressed: 0,
+    preprocessing: 0,
+    autofilter: 0,
+    partition_limit: 0,
+    alpha_compression: 1,
+    alpha_filtering: 1,
+    alpha_quality: 100,
+    lossless: 0,
+    exact: 0,
+    use_delta_palette: 0,
+    vlnr: 0,
+    near_lossless: 60,
+  },
+  avif: {
+    cqLevel: 33,
+    denoiseLevel: 0,
+    cqAlphaLevel: -1,
+    tileRows: 0,
+    tileCols: 0,
+    speed: 6,
+    subsample: 1,
+    chromaDeltaQ: false,
+    sharpness: 0,
+    tune: 0,
+  },
+  jxl: {
+    effort: 7,
+    quality: 75,
+    progressive: false,
+    targetPsize: 0,
+  },
+  oxiPNG: {
+    level: 2,
+  },
+  browserJPEG: {
+    quality: 0.75,
+  },
+  browserPNG: {},
+  browserGIF: {},
+  qoi: {},
+  wp2: {
+    quality: 75,
+  },
+};
+
+export const ENCODER_LIST: EncoderType[] = Object.keys(ENCODER_REGISTRY) as EncoderType[];

package/src/constants/resizeMethods.ts

@@ -0,0 +1,23 @@
+/**
+ * 重采样算法常量
+ */
+
+export const RESIZE_METHODS = [
+  { value: 'lanczos3', label: 'Lanczos3' },
+  { value: 'catrom', label: 'Catrom' },
+  { value: 'mitchell', label: 'Mitchell' },
+  { value: 'triangle', label: 'Triangle' },
+  { value: 'vector', label: 'Vector' },
+] as const;
+
+export const FIT_METHODS = [
+  { value: 'stretch', label: '拉伸' },
+  { value: 'contain', label: '适应' },
+] as const;
+
+export const ROTATE_OPTIONS = [
+  { value: 0, label: '不旋转' },
+  { value: 90, label: '顺时针 90°' },
+  { value: 180, label: '旋转 180°' },
+  { value: 270, label: '逆时针 90°' },
+] as const;

package/src/index.ts

@@ -0,0 +1,63 @@
+/**
+ * Vue3 Image Compressor 组件库入口
+ */
+
+// 组件
+export { default as ImageCompressor } from './components/ImageCompressor.vue';
+
+// Composables
+export { useCompression } from './composables/useCompression';
+export { useEncoderRegistry } from './composables/useEncoderRegistry';
+export { useWorker } from './composables/useWorker';
+
+// 类型
+export type {
+  EncoderType,
+  EncoderMeta,
+  EncoderOptions,
+  EncoderState,
+  MozJpegEncodeOptions,
+  WebPEncodeOptions,
+  AvifEncodeOptions,
+  JxlEncodeOptions,
+  OxiPngEncodeOptions,
+  BrowserJpegEncodeOptions,
+  Wp2EncodeOptions,
+} from './types/encoder';
+
+export type {
+  ResizeOptions,
+  QuantizeOptions,
+  RotateOptions,
+  ProcessorState,
+} from './types/processor';
+
+export type {
+  CompressionOptions,
+  CompressionResult,
+  ImageInfo,
+} from './types/compression';
+
+export type { WorkerApi } from './types/worker';
+
+// 常量
+export { ENCODER_REGISTRY, DEFAULT_ENCODER_OPTIONS, ENCODER_LIST } from './constants/encoders';
+export { RESIZE_METHODS, FIT_METHODS, ROTATE_OPTIONS } from './constants/resizeMethods';
+
+// 工具
+export {
+  blobToImageData,
+  imageDataToBlob,
+  getImageDimensions,
+  sniffMimeType,
+  canDecodeImageType,
+  arrayBufferToFile,
+} from './utils/image';
+
+export {
+  formatBytes,
+  calculateSavings,
+  generateCompressedFilename,
+  createBlobUrl,
+  revokeBlobUrl,
+} from './utils/file';

package/src/types/compression.ts

@@ -0,0 +1,38 @@
+/**
+ * 压缩结果类型定义
+ */
+
+export interface ImageInfo {
+  file: File;
+  size: number;
+  width: number;
+  height: number;
+  blobUrl: string;
+}
+
+export interface CompressionResult {
+  original: ImageInfo;
+  compressed: ImageInfo;
+  savingsBytes: number;
+  savingsPercent: number;
+  encoderType: string;
+  encoderOptions: Record<string, any>;
+}
+
+export interface CompressionOptions {
+  encoder: string;
+  encoderOptions: Record<string, any>;
+  resize?: {
+    enabled: boolean;
+    width?: number;
+    height?: number;
+    method?: string;
+    fitMethod?: string;
+  };
+  quantize?: {
+    enabled: boolean;
+    numColors?: number;
+    dither?: number;
+  };
+  rotate?: number;
+}

package/src/types/encoder.ts

@@ -0,0 +1,144 @@
+/**
+ * 编码器类型定义
+ * 对标 Squoosh: src/client/lazy-app/feature-meta/index.ts
+ */
+
+export type EncoderType =
+  | 'mozJPEG'
+  | 'webP'
+  | 'avif'
+  | 'jxl'
+  | 'oxiPNG'
+  | 'browserJPEG'
+  | 'browserPNG'
+  | 'browserGIF'
+  | 'qoi'
+  | 'wp2';
+
+export interface EncoderMeta {
+  label: string;
+  mimeType: string;
+  extension: string;
+}
+
+export interface MozJpegColorSpace {
+  GRAYSCALE: 1;
+  RGB: 2;
+  YCbCr: 3;
+}
+
+export interface MozJpegEncodeOptions {
+  quality: number;
+  baseline: boolean;
+  arithmetic: boolean;
+  progressive: boolean;
+  optimize_coding: boolean;
+  smoothing: number;
+  color_space: number;
+  quant_table: number;
+  trellis_multipass: boolean;
+  trellis_opt_zero: boolean;
+  trellis_opt_table: boolean;
+  trellis_loops: number;
+  auto_subsample: boolean;
+  chroma_subsample: number;
+  separate_chroma_quality: boolean;
+  chroma_quality: number;
+}
+
+export interface WebPEncodeOptions {
+  quality: number;
+  target_size: number;
+  target_PSNR: number;
+  method: number;
+  sns_strength: number;
+  filter_strength: number;
+  filter_sharpness: number;
+  filter_type: number;
+  partitions: number;
+  segments: number;
+  pass: number;
+  show_compressed: number;
+  preprocessing: number;
+  autofilter: number;
+  partition_limit: number;
+  alpha_compression: number;
+  alpha_filtering: number;
+  alpha_quality: number;
+  lossless: number;
+  exact: number;
+  use_delta_palette: number;
+  vlnr: number;
+  near_lossless: number;
+}
+
+export interface AvifEncodeOptions {
+  cqLevel: number;
+  denoiseLevel: number;
+  cqAlphaLevel: number;
+  tileRows: number;
+  tileCols: number;
+  speed: number;
+  subsample: number;
+  chromaDeltaQ: boolean;
+  sharpness: number;
+  tune: number;
+}
+
+export interface JxlEncodeOptions {
+  effort: number;
+  quality: number;
+  progressive: boolean;
+  targetPsize: number;
+}
+
+export interface OxiPngEncodeOptions {
+  level: number;
+}
+
+export interface BrowserJpegEncodeOptions {
+  quality: number;
+}
+
+export interface BrowserPngEncodeOptions {
+  // browser PNG has no options
+}
+
+export interface BrowserGifEncodeOptions {
+  // browser GIF has no options
+}
+
+export interface QoiEncodeOptions {
+  // QOI has no options
+}
+
+export interface Wp2EncodeOptions {
+  quality: number;
+}
+
+export type EncoderOptions =
+  | MozJpegEncodeOptions
+  | WebPEncodeOptions
+  | AvifEncodeOptions
+  | JxlEncodeOptions
+  | OxiPngEncodeOptions
+  | BrowserJpegEncodeOptions
+  | BrowserPngEncodeOptions
+  | BrowserGifEncodeOptions
+  | QoiEncodeOptions
+  | Wp2EncodeOptions;
+
+export interface EncoderState<T extends EncoderType = EncoderType> {
+  type: T;
+  options: EncoderOptions;
+}
+
+export type EncoderEntry = {
+  meta: EncoderMeta;
+  encode: (
+    signal: AbortSignal,
+    workerApi: any,
+    imageData: ImageData,
+    options: EncoderOptions
+  ) => Promise<ArrayBuffer>;
+};

package/src/types/processor.ts

@@ -0,0 +1,36 @@
+/**
+ * 处理器类型定义
+ * 对标 Squoosh: src/features/processors/resize/shared/meta.ts
+ */
+
+export interface ResizeOptions {
+  enabled: boolean;
+  width: number;
+  height: number;
+  method: 'lanczos3' | 'catrom' | 'mitchell' | 'triangle' | 'vector';
+  fitMethod: 'stretch' | 'contain';
+  premultiply: boolean;
+  linearRGB: boolean;
+}
+
+export interface QuantizeOptions {
+  enabled: boolean;
+  numColors: number;
+  dither: number;
+}
+
+export interface RotateOptions {
+  rotate: number; // 0, 90, 180, 270
+}
+
+export interface ProcessorState {
+  resize: ResizeOptions;
+  quantize: QuantizeOptions;
+}
+
+export interface PreprocessorState {
+  rotate: RotateOptions;
+}
+
+export type ResizeMethod = 'lanczos3' | 'catrom' | 'mitchell' | 'triangle' | 'vector';
+export type FitMethod = 'stretch' | 'contain';

package/src/types/worker.ts

@@ -0,0 +1,29 @@
+/**
+ * Worker API 类型定义
+ * 对标 Squoosh: src/client/lazy-app/worker-bridge/meta.ts
+ */
+
+export interface WorkerApi {
+  // Decoders
+  avifDecode(blob: Blob): Promise<ImageData>;
+  jxlDecode(blob: Blob): Promise<ImageData>;
+  qoiDecode(blob: Blob): Promise<ImageData>;
+  webpDecode(blob: Blob): Promise<ImageData>;
+  wp2Decode(blob: Blob): Promise<ImageData>;
+
+  // Encoders
+  avifEncode(data: ImageData, options: any): Promise<Uint8Array>;
+  jxlEncode(data: ImageData, options: any): Promise<Uint8Array>;
+  mozjpegEncode(data: ImageData, options: any): Promise<Uint8Array>;
+  oxipngEncode(data: ImageData, options: any): Promise<Uint8Array>;
+  qoiEncode(data: ImageData, options: any): Promise<Uint8Array>;
+  webpEncode(data: ImageData, options: any): Promise<Uint8Array>;
+  wp2Encode(data: ImageData, options: any): Promise<Uint8Array>;
+
+  // Preprocessors
+  rotate(data: ImageData, options: any): Promise<ImageData>;
+
+  // Processors
+  quantize(data: ImageData, options: any): Promise<ImageData>;
+  resize(data: ImageData, options: any): Promise<ImageData>;
+}