vue3-image-compressor 1.0.4

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "vue3-image-compressor",
+  "version": "1.0.4",
+  "description": "Vue3 + TypeScript 图片压缩组件，基于 Squoosh 核心原理",
+  "type": "module",
+  "main": "./dist/vue-image-compressor.umd.cjs",
+  "module": "./dist/vue-image-compressor.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-image-compressor.js",
+      "require": "./dist/vue-image-compressor.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vue-tsc && vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "vue3",
+    "typescript",
+    "image",
+    "compression",
+    "squoosh",
+    "webp",
+    "avif",
+    "jpeg",
+    "png"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^2.2.12"
+  }
+}

package/src/components/ImageCompressor.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="image-compressor">
+    <!-- 文件上传区域 -->
+    <div class="upload-zone" @drop.prevent="onDrop" @dragover.prevent>
+      <input
+        type="file"
+        accept="image/*"
+        @change="onFileChange"
+        ref="fileInput"
+        class="file-input"
+      />
+      <div class="upload-prompt" @click="fileInput?.click()">
+        <slot name="upload-prompt">
+          <p>拖拽图片到此处，或点击上传</p>
+        </slot>
+      </div>
+    </div>
+
+    <!-- 预览区域 -->
+    <div v-if="originalUrl" class="preview-area">
+      <div class="preview-item">
+        <h4>原始图片</h4>
+        <img :src="originalUrl" alt="Original" />
+        <p>{{ originalSize }}</p>
+      </div>
+      <div class="preview-item">
+        <h4>压缩后</h4>
+        <img v-if="compressedUrl" :src="compressedUrl" alt="Compressed" />
+        <div v-else-if="isCompressing" class="compressing">
+          <progress :value="progress" max="100" />
+          <p>压缩中... {{ progress }}%</p>
+        </div>
+        <p v-if="compressedSize">{{ compressedSize }}</p>
+      </div>
+    </div>
+
+    <!-- 编码器设置 -->
+    <div class="encoder-settings" v-if="originalUrl">
+      <label>编码器：</label>
+      <select v-model="selectedEncoder" @change="onEncoderChange">
+        <option
+          v-for="enc in availableEncoders"
+          :key="enc.type"
+          :value="enc.type"
+        >
+          {{ enc.label }} ({{ enc.extension }})
+        </option>
+      </select>
+
+      <!-- 通用质量滑块 -->
+      <div class="quality-control" v-if="hasQualityOption">
+        <label>
+          质量: {{ encoderOptions.quality ?? 75 }}
+          <input
+            type="range"
+            min="0"
+            max="100"
+            :value="encoderOptions.quality ?? 75"
+            @input="updateOption('quality', Number(($event.target as HTMLInputElement).value))"
+------- REPLACE
+
+          />
+        </label>
+      </div>
+
+      <!-- 更多设置插槽 -->
+      <slot name="encoder-settings" :encoder="selectedEncoder" :options="encoderOptions" />
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="actions" v-if="originalUrl">
+      <button
+        @click="startCompress"
+        :disabled="isCompressing"
+        class="btn-primary"
+      >
+        {{ isCompressing ? '压缩中...' : '开始压缩' }}
+      </button>
+      <button
+        v-if="canCancel"
+        @click="cancel"
+        class="btn-secondary"
+      >
+        取消
+      </button>
+      <button
+        v-if="result"
+        @click="downloadResult"
+        class="btn-success"
+      >
+        下载 (节省 {{ result.savingsPercent }}%)
+      </button>
+    </div>
+
+    <!-- 错误提示 -->
+    <div v-if="error" class="error">{{ error }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useCompression } from '../composables/useCompression';
+import { useEncoderRegistry } from '../composables/useEncoderRegistry';
+import type { CompressionOptions } from '../types/compression';
+import { formatBytes } from '../utils/file';
+
+const props = defineProps<{
+  // 可传入自定义编码选项
+  defaultEncoder?: string;
+  defaultOptions?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'success', result: any): void;
+  (e: 'error', err: Error): void;
+  (e: 'cancel'): void;
+}>();
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const currentFile = ref<File | null>(null);
+const originalUrl = ref<string>('');
+const compressedUrl = ref<string>('');
+
+const {
+  compress,
+  cancel,
+  downloadResult,
+  isCompressing,
+  progress,
+  error,
+  result,
+  canCancel,
+} = useCompression();
+
+const {
+  selectedEncoder,
+  encoderOptions,
+  availableEncoders,
+  selectEncoder,
+  updateOption,
+} = useEncoderRegistry();
+
+// 初始化默认编码器
+if (props.defaultEncoder) {
+  selectEncoder(props.defaultEncoder as any);
+}
+if (props.defaultOptions) {
+  Object.entries(props.defaultOptions).forEach(([k, v]) => updateOption(k, v));
+}
+
+const originalSize = computed(() =>
+  currentFile.value ? formatBytes(currentFile.value.size) : ''
+);
+
+const compressedSize = computed(() =>
+  result.value ? formatBytes(result.value.compressed.size) : ''
+);
+
+const hasQualityOption = computed(() =>
+  ['mozJPEG', 'webP', 'jxl', 'browserJPEG', 'wp2'].includes(selectedEncoder.value)
+);
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (input.files && input.files[0]) {
+    handleFile(input.files[0]);
+  }
+}
+
+function onDrop(event: DragEvent) {
+  if (event.dataTransfer?.files[0]) {
+    handleFile(event.dataTransfer.files[0]);
+  }
+}
+
+function handleFile(file: File) {
+  if (!file.type.startsWith('image/')) return;
+  currentFile.value = file;
+  originalUrl.value = URL.createObjectURL(file);
+  // 清理旧的压缩结果
+  if (compressedUrl.value) {
+    URL.revokeObjectURL(compressedUrl.value);
+    compressedUrl.value = '';
+  }
+}
+
+function onEncoderChange() {
+  // 切换编码器时重置选项
+  selectEncoder(selectedEncoder.value);
+}
+
+async function startCompress() {
+  if (!currentFile.value) return;
+
+  try {
+    const options: CompressionOptions = {
+      encoder: selectedEncoder.value,
+      encoderOptions: { ...encoderOptions.value },
+    };
+
+    const compressionResult = await compress(currentFile.value, options);
+    compressedUrl.value = compressionResult.compressed.blobUrl;
+    emit('success', compressionResult);
+  } catch (err) {
+    if (err instanceof DOMException && err.name === 'AbortError') {
+      emit('cancel');
+      return;
+    }
+    emit('error', err instanceof Error ? err : new Error(String(err)));
+  }
+}
+
+// 清理
+watch(
+  () => currentFile.value,
+  (oldVal, newVal) => {
+    if (oldVal && oldVal !== newVal && originalUrl.value) {
+      URL.revokeObjectURL(originalUrl.value);
+    }
+  }
+);
+</script>
+
+<style scoped>
+.image-compressor {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.upload-zone {
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  padding: 40px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.upload-zone:hover {
+  border-color: #409eff;
+}
+
+.file-input {
+  display: none;
+}
+
+.preview-area {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin: 20px 0;
+}
+
+.preview-item img {
+  max-width: 100%;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.compressing {
+  padding: 40px;
+  text-align: center;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-success {
+  padding: 10px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-primary {
+  background: #409eff;
+  color: white;
+}
+
+.btn-primary:disabled {
+  background: #a0cfff;
+}
+
+.btn-secondary {
+  background: #f56c6c;
+  color: white;
+}
+
+.btn-success {
+  background: #67c23a;
+  color: white;
+}
+
+.error {
+  color: #f56c6c;
+  margin-top: 10px;
+}
+</style>

package/src/composables/useCompression.ts

@@ -0,0 +1,314 @@
+/**
+ * 核心压缩流程编排 Composable
+ * 对标 Squoosh: src/client/lazy-app/Compress/index.tsx
+ * 编排：解码 → 预处理 → 处理 → 编码 → 结果
+ */
+
+import { ref, computed } from 'vue';
+import type {
+  CompressionOptions,
+  CompressionResult,
+  ImageInfo,
+} from '../types/compression';
+import { ENCODER_REGISTRY } from '../constants/encoders';
+import {
+  blobToImageData,
+  imageDataToBlob,
+  arrayBufferToFile,
+  sniffMimeType,
+  canDecodeImageType,
+} from '../utils/image';
+import {
+  calculateSavings,
+  generateCompressedFilename,
+  createBlobUrl,
+  revokeBlobUrl,
+} from '../utils/file';
+import { useWorker } from './useWorker';
+
+export function useCompression() {
+  const isCompressing = ref(false);
+  const progress = ref(0);
+  const error = ref<string | null>(null);
+  const result = ref<CompressionResult | null>(null);
+  const abortController = ref<AbortController | null>(null);
+
+  const { getWorkerApi, executeTask } = useWorker();
+
+  const canCancel = computed(() => isCompressing.value && !!abortController.value);
+
+  /**
+   * 解码图片（Worker 或浏览器内置）
+   */
+  async function decodeImage(
+    signal: AbortSignal,
+    blob: Blob
+  ): Promise<ImageData> {
+    const mimeType = await sniffMimeType(blob);
+    const canDecode = await canDecodeImageType(mimeType);
+    const workerApi = await getWorkerApi();
+
+    if (!canDecode) {
+      // 特殊格式使用 Worker 解码
+      if (mimeType === 'image/avif') {
+        return executeTask(signal, () => workerApi.avifDecode(blob));
+      }
+      if (mimeType === 'image/webp') {
+        return executeTask(signal, () => workerApi.webpDecode(blob));
+      }
+      if (mimeType === 'image/jxl') {
+        return executeTask(signal, () => workerApi.jxlDecode(blob));
+      }
+      if (mimeType === 'image/webp2') {
+        return executeTask(signal, () => workerApi.wp2Decode(blob));
+      }
+      if (mimeType === 'image/qoi') {
+        return executeTask(signal, () => workerApi.qoiDecode(blob));
+      }
+    }
+
+    // 浏览器内置解码
+    return blobToImageData(blob);
+  }
+
+  /**
+   * 预处理（旋转）
+   */
+  async function preprocessImage(
+    signal: AbortSignal,
+    imageData: ImageData,
+    rotate: number
+  ): Promise<ImageData> {
+    if (rotate === 0) return imageData;
+
+    const workerApi = await getWorkerApi();
+    return executeTask(signal, () =>
+      workerApi.rotate(imageData, { rotate })
+    );
+  }
+
+  /**
+   * 处理图片（resize / quantize）
+   */
+  async function processImage(
+    signal: AbortSignal,
+    imageData: ImageData,
+    options: CompressionOptions
+  ): Promise<ImageData> {
+    let processed = imageData;
+    const workerApi = await getWorkerApi();
+
+    // 调整尺寸
+    if (options.resize?.enabled) {
+      processed = await executeTask(signal, () =>
+        workerApi.resize(processed, {
+          width: options.resize!.width || processed.width,
+          height: options.resize!.height || processed.height,
+          method: options.resize!.method || 'lanczos3',
+          fitMethod: options.resize!.fitMethod || 'stretch',
+          premultiply: true,
+          linearRGB: true,
+        })
+      );
+    }
+
+    // 颜色量化
+    if (options.quantize?.enabled) {
+      processed = await executeTask(signal, () =>
+        workerApi.quantize(processed, {
+          numColors: options.quantize!.numColors || 256,
+          dither: options.quantize!.dither || 1.0,
+        })
+      );
+    }
+
+    return processed;
+  }
+
+  /**
+   * 编码图片
+   */
+  async function encodeImage(
+    signal: AbortSignal,
+    imageData: ImageData,
+    options: CompressionOptions
+  ): Promise<ArrayBuffer> {
+    const workerApi = await getWorkerApi();
+    const encoder = options.encoder;
+
+    // 浏览器内置编码器
+    if (encoder === 'browserJPEG') {
+      const blob = await imageDataToBlob(
+        imageData,
+        'image/jpeg',
+        options.encoderOptions.quality
+      );
+      return blob.arrayBuffer();
+    }
+    if (encoder === 'browserPNG') {
+      const blob = await imageDataToBlob(imageData, 'image/png');
+      return blob.arrayBuffer();
+    }
+    if (encoder === 'browserGIF') {
+      // GIF 需要使用 Worker 或第三方库
+      throw new Error('Browser GIF encoding not supported directly');
+    }
+
+    // WASM 编码器
+    const encodeMap: Record<string, (data: ImageData, opts: any) => Promise<Uint8Array>> = {
+      mozJPEG: workerApi.mozjpegEncode,
+      webP: workerApi.webpEncode,
+      avif: workerApi.avifEncode,
+      jxl: workerApi.jxlEncode,
+      oxiPNG: workerApi.oxipngEncode,
+      qoi: workerApi.qoiEncode,
+      wp2: workerApi.wp2Encode,
+    };
+
+    const encodeFn = encodeMap[encoder];
+    if (!encodeFn) {
+      throw new Error(`Unknown encoder: ${encoder}`);
+    }
+
+    const encoded = await executeTask(signal, () =>
+      encodeFn.call(workerApi, imageData, options.encoderOptions)
+    );
+
+    return (encoded as Uint8Array).buffer as ArrayBuffer;
+  }
+
+  /**
+   * 主压缩流程
+   */
+  async function compress(
+    file: File,
+    options: CompressionOptions
+  ): Promise<CompressionResult> {
+    abortController.value = new AbortController();
+    const signal = abortController.value.signal;
+
+    isCompressing.value = true;
+    progress.value = 0;
+    error.value = null;
+    const previousResult = result.value;
+    result.value = null;
+
+    // 清理旧结果
+    if (previousResult?.compressed?.blobUrl) {
+      revokeBlobUrl(previousResult.compressed.blobUrl);
+    }
+
+    try {
+      // 1. 解码
+      progress.value = 10;
+      const originalInfo: ImageInfo = {
+        file,
+        size: file.size,
+        width: 0,
+        height: 0,
+        blobUrl: createBlobUrl(file),
+      };
+
+      const decoded = await decodeImage(signal, file);
+      originalInfo.width = decoded.width;
+      originalInfo.height = decoded.height;
+      progress.value = 25;
+
+      // 2. 预处理
+      const preprocessed = await preprocessImage(
+        signal,
+        decoded,
+        options.rotate || 0
+      );
+      progress.value = 35;
+
+      // 3. 处理
+      const processed = await processImage(signal, preprocessed, options);
+      progress.value = 50;
+
+      // 4. 编码
+      const encodedBuffer = await encodeImage(signal, processed, options);
+      progress.value = 80;
+
+      // 5. 组装结果
+      const meta = ENCODER_REGISTRY[options.encoder as keyof typeof ENCODER_REGISTRY];
+      const compressedFilename = generateCompressedFilename(
+        file.name,
+        meta?.extension || 'bin'
+      );
+      const compressedFile = arrayBufferToFile(
+        encodedBuffer,
+        compressedFilename,
+        meta?.mimeType || 'application/octet-stream'
+      );
+
+      const compressedInfo: ImageInfo = {
+        file: compressedFile,
+        size: compressedFile.size,
+        width: processed.width,
+        height: processed.height,
+        blobUrl: createBlobUrl(compressedFile),
+      };
+
+      const compressionResult: CompressionResult = {
+        original: originalInfo,
+        compressed: compressedInfo,
+        savingsBytes: originalInfo.size - compressedInfo.size,
+        savingsPercent: calculateSavings(originalInfo.size, compressedInfo.size),
+        encoderType: options.encoder,
+        encoderOptions: options.encoderOptions,
+      };
+
+      result.value = compressionResult;
+      progress.value = 100;
+      return compressionResult;
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') {
+        error.value = '已取消';
+        throw err;
+      }
+      const message = err instanceof Error ? err.message : '压缩失败';
+      error.value = message;
+      console.error('Compression error:', err);
+      throw err;
+    } finally {
+      isCompressing.value = false;
+      abortController.value = null;
+    }
+  }
+
+  /**
+   * 取消压缩
+   */
+  function cancel() {
+    if (abortController.value) {
+      abortController.value.abort();
+    }
+  }
+
+  /**
+   * 下载压缩结果
+   */
+  function downloadResult() {
+    if (!result.value) return;
+
+    const { compressed } = result.value;
+    const a = document.createElement('a');
+    a.href = compressed.blobUrl;
+    a.download = compressed.file.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  return {
+    compress,
+    cancel,
+    downloadResult,
+    isCompressing,
+    progress,
+    error,
+    result,
+    canCancel,
+  };
+}