# @happys/image-process

> image process

Latest version **0.1.0** (published 2022-01-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @happys/image-process
pnpm add @happys/image-process
yarn add @happys/image-process
bun add @happys/image-process
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-01-04 |
| First published | 2022-01-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 26.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 1032380143@qq.com |
| Maintainers | happys |
| Keywords | image-process, image-compress |

## Links

- npm: https://www.npmjs.com/package/@happys/image-process
- npm.io page: https://npm.io/package/@happys/image-process

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-01-04

## README

## Getting Started

### Installation

```base
npm install @happys/image-process
```
```base
yarn add @happys/image-process
```

### Node Usage

```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
            customRequest={customRequest}
        >
            upload
        </Upload>
    )
}
export default App;
```

### Basic Usage
```html
<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 &lt;FileOptionType> | reader(获取图片参数) | - |
| compress | function(options?:CompressOptions): Promise &lt;FileOptionType> | image compress(图片压缩与缩放)  | { quality:80, width: FileOptionType.width, height: FileOptionType.height}} |
| toBase64 | function(): Promise &lt;string> | image base64(图像base64) | - |
| getFileOptions | function():Promise &lt;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 时该参数不生效）
}
```

---
_Source: https://npm.io/package/@happys/image-process · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._