vue3-image-compressor 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -147,6 +147,67 @@ async function simpleCompress(file: File, quality: number): Promise<Blob> {
|
|
|
147
147
|
}
|
|
148
148
|
```
|
|
149
149
|
|
|
150
|
+
### 4. 手动压缩函数（compressFile）
|
|
151
|
+
|
|
152
|
+
如果需要更灵活地控制压缩流程，可以直接使用 `compressFile` 函数。它支持所有 WASM 编码器，返回完整的压缩结果信息，并且支持通过 `AbortSignal` 取消任务。
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
import { compressFile } from 'vue-image-compressor'
|
|
156
|
+
|
|
157
|
+
async function handleCompress(file: File) {
|
|
158
|
+
const result = await compressFile(file, {
|
|
159
|
+
encoder: 'mozJPEG', // 可选：编码器类型，默认 'mozJPEG'
|
|
160
|
+
encoderOptions: { quality: 75 }, // 可选：编码器参数，不传则使用默认值
|
|
161
|
+
})
|
|
162
|
+
|
|
163
|
+
console.log('压缩前:', result.originalSize)
|
|
164
|
+
console.log('压缩后:', result.compressedSize)
|
|
165
|
+
console.log('节省:', result.savingsPercent + '%')
|
|
166
|
+
console.log('尺寸:', result.width, 'x', result.height)
|
|
167
|
+
|
|
168
|
+
// 直接上传压缩后的 File 对象
|
|
169
|
+
upload(result.file)
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
#### 支持取消（AbortController）
|
|
174
|
+
|
|
175
|
+
```typescript
|
|
176
|
+
const controller = new AbortController()
|
|
177
|
+
|
|
178
|
+
// 开始压缩
|
|
179
|
+
const promise = compressFile(file, {
|
|
180
|
+
encoder: 'avif',
|
|
181
|
+
encoderOptions: { cqLevel: 20 },
|
|
182
|
+
signal: controller.signal, // 传入 AbortSignal
|
|
183
|
+
})
|
|
184
|
+
|
|
185
|
+
// 用户点击取消时
|
|
186
|
+
controller.abort()
|
|
187
|
+
|
|
188
|
+
try {
|
|
189
|
+
await promise
|
|
190
|
+
} catch (err) {
|
|
191
|
+
if (err.name === 'AbortError') {
|
|
192
|
+
console.log('压缩已取消')
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
#### 返回值说明
|
|
198
|
+
|
|
199
|
+
| 字段 | 类型 | 说明 |
|
|
200
|
+
|------|------|------|
|
|
201
|
+
| `file` | `File` | 压缩后的文件对象，可直接上传或下载 |
|
|
202
|
+
| `originalSize` | `number` | 原始文件大小（字节） |
|
|
203
|
+
| `compressedSize` | `number` | 压缩后文件大小（字节） |
|
|
204
|
+
| `savingsBytes` | `number` | 节省的字节数 |
|
|
205
|
+
| `savingsPercent` | `number` | 节省百分比 |
|
|
206
|
+
| `width` | `number` | 图片宽度 |
|
|
207
|
+
| `height` | `number` | 图片高度 |
|
|
208
|
+
| `encoderType` | `string` | 实际使用的编码器类型 |
|
|
209
|
+
| `encoderOptions` | `object` | 实际使用的编码器参数（含默认值） |
|
|
210
|
+
|
|
150
211
|
## 编码器支持
|
|
151
212
|
|
|
152
213
|
| 编码器 | 类型 | 质量参数 | 说明 |
|