vue3-image-compressor 1.0.5 → 1.0.8

package/README.md

@@ -2,6 +2,12 @@
 
 基于 [Squoosh](https://github.com/GoogleChromeLabs/squoosh) 核心原理封装的 Vue3 + TypeScript 通用图片压缩组件库。
 
+## 🚀 在线 Demo
+
+[![Demo](https://img.shields.io/badge/Demo-在线体验-green?logo=github&style=flat-square)](https://think_chl.github.io/vue-compressor/)
+
+直接点击上方徽章即可查看在线 Demo，无需安装。
+
 ## 架构分析
 
 ### 图片压缩原理
@@ -141,6 +147,67 @@ async function simpleCompress(file: File, quality: number): Promise<Blob> {
 }
 ```
 
+### 4. 手动压缩函数（compressFile）
+
+如果需要更灵活地控制压缩流程，可以直接使用 `compressFile` 函数。它支持所有 WASM 编码器，返回完整的压缩结果信息，并且支持通过 `AbortSignal` 取消任务。
+
+```typescript
+import { compressFile } from 'vue-image-compressor'
+
+async function handleCompress(file: File) {
+  const result = await compressFile(file, {
+    encoder: 'mozJPEG',              // 可选：编码器类型，默认 'mozJPEG'
+    encoderOptions: { quality: 75 }, // 可选：编码器参数，不传则使用默认值
+  })
+
+  console.log('压缩前:', result.originalSize)
+  console.log('压缩后:', result.compressedSize)
+  console.log('节省:', result.savingsPercent + '%')
+  console.log('尺寸:', result.width, 'x', result.height)
+
+  // 直接上传压缩后的 File 对象
+  upload(result.file)
+}
+```
+
+#### 支持取消（AbortController）
+
+```typescript
+const controller = new AbortController()
+
+// 开始压缩
+const promise = compressFile(file, {
+  encoder: 'avif',
+  encoderOptions: { cqLevel: 20 },
+  signal: controller.signal, // 传入 AbortSignal
+})
+
+// 用户点击取消时
+controller.abort()
+
+try {
+  await promise
+} catch (err) {
+  if (err.name === 'AbortError') {
+    console.log('压缩已取消')
+  }
+}
+```
+
+#### 返回值说明
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `file` | `File` | 压缩后的文件对象，可直接上传或下载 |
+| `originalSize` | `number` | 原始文件大小（字节） |
+| `compressedSize` | `number` | 压缩后文件大小（字节） |
+| `savingsBytes` | `number` | 节省的字节数 |
+| `savingsPercent` | `number` | 节省百分比 |
+| `width` | `number` | 图片宽度 |
+| `height` | `number` | 图片高度 |
+| `encoderType` | `string` | 实际使用的编码器类型 |
+| `encoderOptions` | `object` | 实际使用的编码器参数（含默认值） |
+
 ## 编码器支持
 
 | 编码器 | 类型 | 质量参数 | 说明 |