squoosh
squoosh的压缩效果很好，github把代码拉下来后在windows电脑上按照markdown里的步骤并不能直接运行 以下内容是基于 通义千问 跑通
- 在线网页 squoosh.app/
- git clone github.com/GoogleChrom…
- 代码拉下来后 nodejs版本最好是16
- npm install
- npm run build
- 修改package.json的script，dev、serve命令要改一下，原版代码是Linux系统下跑的
"scripts": {
"build": "rollup -c && node lib/move-output.js",
"debug": "node --inspect-brk node_modules/.bin/rollup -c",
"dev": "cross-env DEV_PORT=5000 run-p watch serve",
"watch": "rollup -cw",
"serve": "serve --listen 5000 --config ../../../serve.json .tmp/build/static",
"prepare": "husky install"
},
- npm run dev 运行(注意：此时链接打开是404，要等1分钟左右后再开)
serve启动很快，立刻就开始服务了；但watch编译大型项目（如 Squoosh）需要几十秒甚至几分钟。如果你在编译完成前就刷新了页面，就会看到 404。
当npm run serve后 会生成.tmp/build/static里的文件，即squoosh.tmp\build\static里的文件可以直接部署到静态文件服务器上
注意：它打包后的压缩功能代码有25M左右
browser-image-compression
- 基于canvas的一个图片压缩npm包，方便集成
| 特性 | browser-image-compression | Squoosh (前端方案) |
|---|---|---|
| 核心技术 | Canvas API (原生) | WebAssembly (C++ 移植) |
| 压缩率 | ⭐⭐⭐ (一般) | ⭐⭐⭐⭐⭐ (极高，业界顶尖) |
| 支持格式 | JPEG, PNG, (WebP*) | JPEG, PNG, WebP, AVIF, JXL, GIF, BMP 等 |
| 高级参数 | 少 (仅质量、宽高) | 极多 (可微调编码细节) |
| 集成难度 | ⭐ (非常简单) | ⭐⭐⭐⭐ (复杂，需配 Wasm/Worker) |
| 包体积 | 小 (<50KB) | 大 (需加载几百 KB 到几 MB 的 Wasm 文件) |
| 隐私性 | 好 (本地运行) | 好 (本地运行) |
| 典型场景 | 快速上传、后台管理 | 专业摄影、电商、对性能极致追求 |
用法
- npm install browser-image-compression --save
-
import imageCompression from 'browser-image-compression'; imageCompression(file: File, options: Options): Promise<File>
可配置项
// you should provide one of maxSizeMB, maxWidthOrHeight in the options
const options: Options = {
maxSizeMB: number, // (default: Number.POSITIVE_INFINITY)
maxWidthOrHeight: number, // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
// but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.
// Please check the Caveat part for details.
onProgress: Function, // optional, a function takes one progress argument (percentage from 0 to 100)
useWebWorker: boolean, // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
libURL: string, // optional, the libURL of this library for importing script in Web Worker (default: https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js)
preserveExif: boolean, // optional, use preserve Exif metadata for JPEG image e.g., Camera model, Focal length, etc (default: false)
signal: AbortSignal, // optional, to abort / cancel the compression
// following options are for advanced users
maxIteration: number, // optional, max number of iteration to compress the image (default: 10)
exifOrientation: number, // optional, see https://stackoverflow.com/a/32490603/10395024
fileType: string, // optional, fileType override e.g., 'image/jpeg', 'image/png' (default: file.type)
initialQuality: number, // optional, initial quality value between 0 and 1 (default: 1)
alwaysKeepResolution: boolean // optional, only reduce quality, always keep width and height (default: false)
}
imageCompression(file: File, options: Options): Promise<File>
