@happys/image-process
v0.1.0
Published
image process
Downloads
16
Readme
Getting Started
Installation
npm install @happys/image-process
yarn add @happys/image-process
Node Usage
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
customRequest={customRequest}
>
upload
</Upload>
)
}
export default App;
Basic Usage
<div>
<input type="file" id="file-input">
</div>
<script src="https://unpkg.com/@happys/[email protected]/dist/imageProcess.min.js"></script>
<script>
var fileInput = document.querySelector('#file-input');
fileInput.onchange = function () {
var file = this.files[0];
var ImageProcess = new imageProcess.ImageProcess(file)
ImageProcess.compress().then(function (r) {
console.log(r)
})
}
</script>
Api
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 时该参数不生效)
}