image process
npm install @happys/image-processbase
npm install @happys/image-process
`
`base
yarn add @happys/image-process
`
$3
`jsx
import { ImageProcess } from "@happys/image-process";
import { Upload } from 'antd';
const App = ()=>{
const customRequest = async (files)=>{
const { file } = files;
const imageProcess = new ImageProcess(file)
// 压缩
await imageProcess.compress()
await imageProcess.compress({quality: 70})
await imageProcess.compress({quality: 70,ratio: 0.5})
await imageProcess.reader()
await imageProcess.toBase64()
}
return(
>
upload
)
}
export default App;
`
$3
`html
`
$3
new ImageProcess(file)
file: File(文件流)
image/jpeg | image/png
| Parameter | Type | Description | Default |
| --- | --- | --- | --- |
| reader | function():Promise <FileOptionType> | reader(获取图片参数) | - |
| compress | function(options?:CompressOptions): Promise <FileOptionType> | image compress(图片压缩与缩放) | { quality:80, width: FileOptionType.width, height: FileOptionType.height}} |
| toBase64 | function(): Promise <string> | image base64(图像base64) | - |
| getFileOptions | function():Promise <FileOptionType> | image options(获取图片参数,与reader方法一致) | - |
FileOptionType
`
{
file: File;
base64: string;
size: number;
width: number
height: number;
img?: HTMLImageElement;
}
`
CompressOptions
`
{
quality: number; // 质量 0-100(default: 80)
width?: number; // 宽度(默认值：上传时的宽度)
height?: number; // 高度(默认值：上传时的高度)
ratio?: number; // 按照比例进行缩放（有width、height 时该参数不生效）
}
``