react-image-process

🎨 A image process component for react, like compressed image,clip image, add watermarking of image

normal version

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/

Source Code

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
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;
}

License

MIT