0.2.4 • Published 5 years ago
react-image-process v0.2.4
react-image-process
:art: A image process component for react, like compressed image,clip image, add watermarking of image
Installation
using yarn
:
yarn add react-image-process
using npm
:
npm install react-image-process --save
Screenshots
Example
online example : https://lijinke666.github.io/react-image-process/
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import ReactImageProcess from 'react-image-process';
const onComplete = data => {
console.log('data:', data);
};
ReactDOM.render(
<ReactImageProcess mode="base64" onComplete={onComplete}>
<img src="YOUR_IMG_URL" />
</ReactImageProcess>,
document.getElementById('root')
);
Support multiple Images
<ReactImageProcess mode="compress" quality={0.2} onComplete={onComplete}>
<img src="YOUR_IMG_URL" />
<img src="YOUR_IMG_URL" />
</ReactImageProcess>
rotate
<ReactImageProcess mode="rotate" rotate={30}>
<img src="YOUR_IMG_URL" />
</ReactImageProcess>
get primary color
<ReactImageProcess mode="primaryColor" onComplete={color => console.log(color)}>
<img src="YOUR_IMG_URL" />
</ReactImageProcess>
waterMark
<ReactImageProcess
mode="waterMark"
waterMarkType="image"
waterMark={YOUR_WATER_URL}
width={60}
height={60}
opacity={0.7}
coordinate={[430, 200]}
>
<img src="YOUR_IMG_URL" />
</ReactImageProcess>
<ReactImageProcess
mode="waterMark"
waterMarkType="text"
waterMark={'WATER'}
fontBold={false}
fontSize={20}
fontColor="#396"
coordinate={[10, 20]}
>
<img src="YOUR_IMG_URL" />
</ReactImageProcess>
imageFilter
<ReactImageProcess mode="filter" filterType="vintage">
<img src="YOUR_IMG_URL" />
</ReactImageProcess>
API
Property | Description | Type | Default | |
---|---|---|---|---|
mode | can be set to base64 clip compress rotate waterMark filter primaryColor | string | base64 | |
onComplete | The callback after trans complete conversion | function(base64Data){} | - | |
outputType | image data output type of blob | dataUrl | string | dataUrl |
scale | When the mode is equal to 'clip', the zoom scale of the image. | number | 1.0 | |
coordinate | When the mode is equal to 'clip', coordinate of the image. like [[x1,y1],[x2,y2]] , if mode equal to waterMark like [x1,y1] | number[] | - | |
quality | When the mode is equal to 'compress', quality of the image. | number | 0.92 | |
rotate | When the mode is equal to 'rotate', rotate deg of the image. | number | - | |
waterMark | When the mode is equal to 'waterMark', can be set to image or text | string|ReactNode | - | |
waterMarkType | When the mode is equal to 'waterMark', can be set to image or text | string | text | |
fontBold | When the mode is equal to 'waterMark' and waterMark equal to text ,the font is bold. | boolean | false | |
fontSize | When the mode is equal to 'waterMark' and waterMark equal to text ,the font size | number | 20 | |
fontColor | When the mode is equal to 'waterMark' and waterMark equal to text ,the font color | string | rgba(255,255,255,.5) | |
width | When the mode is equal to 'waterMark' and waterMark equal to image ,the water width | number | 50 | |
height | When the mode is equal to 'waterMark' and waterMark equal to image ,the water height | number | 50 | |
opacity | When the mode is equal to 'waterMark' and waterMark equal to image ,the water opacity range 0-1 | number | 0.5 | |
filterType | When the mode is equal to 'filter', can be set to vintage blackWhite relief blur | string | vintage |
Development
git clone https://github.com/lijinke666/react-image-process.git
npm install
npm start
Properties
export type ReactImageProcessMode =
| 'base64'
| 'clip'
| 'compress'
| 'rotate'
| 'waterMark'
| 'filter'
| 'primaryColor';
export type ReactImageProcessWaterMarkType = 'image' | 'text';
export type ReactImageProcessFilterType =
| 'vintage'
| 'blackWhite'
| 'relief'
| 'blur';
export type ReactImageProcessOutputType = 'blob' | 'dataUrl';
export interface ReactImageProcessProps {
mode: ReactImageProcessMode;
waterMarkType: ReactImageProcessWaterMarkType;
filterType: ReactImageProcessFilterType;
outputType: ReactImageProcessOutputType;
waterMark: string;
rotate: number;
quality: number;
coordinate: number[];
width: number;
height: number;
opacity: number;
fontColor: number;
fontSize: number;
fontBold: number;
onComplete: (data: Blob | string) => void;
}