@happys/image-process

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/image-process@0.1.0/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 时该参数不生效）
}