baize-compress-image

这是一个支持 jpg、jpeg、png、webp 等图片进行压缩的库，它通过 web worker、离屏 canvas 等方式对图片进行压缩，加快压缩的效率。
并且支持多 worker 批量压缩多个图片，不会影响主线程的渲染，有效提升用户体验。

开始

$3

``
pnpm install baize-compress-image
`

$3

在 react 中

`typescript
import ReactDOM from "react-dom/client";
import { ImageCompressor } from "baize-compress-image";

function App() {
const handleMultipleFileChange = async (e: any) => {
const files = Array.from(e.target.files);

// 通过类创建实例，并在创建时设定 worker 数量，默认为4
const compressor = new ImageCompressor({
workerNum: 8,
});
const compressionResults = await compressor.compressImagesWorker(files, {
quality: 0.5,
});

compressionResults.forEach((result, index) => {
if (result.status === "fulfilled") {
const { compressInfo, file } = result.value;
console.log(图片 ${index + 1}:);
console.log( 压缩率: ${compressInfo.rate}%);
console.log( 压缩耗时: ${compressInfo.time}ms);
console.log( 原始大小: ${compressInfo.originalSize} bytes);
console.log( 压缩后大小: ${compressInfo.compressedSize} bytes);
console.log( 压缩后文件:, file);
} else {
console.error(图片 ${index + 1} 压缩失败:, result.reason);
}
});
};

return (


ReactDOM.createRoot(document.getElementById("app")!).render();
`

在 vue 中

`vue



`

API 说明

$3

压缩选项配置：

- quality: 压缩质量，范围 0-1，默认值 0.8

$3

压缩结果信息：

- compressInfo.rate: 压缩率百分比
- compressInfo.time: 压缩耗时（毫秒）
- compressInfo.originalSize: 原始文件大小（字节）
- compressInfo.compressedSize: 压缩后文件大小（字节）
- file`: 压缩后的文件对象