Package Exports

react-image-process

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-image-process) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

lightTheme

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