❤
npm
Sign UpSign In

react-image-process

0.2.4 • Public • Published

react-image-process

npm npm version jest

🎨 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

Readme

Keywords

Package Sidebar

Install

npm i react-image-process

Repository

github.com/lijinke666/react-image-process

Homepage

lijinke666.github.io/react-image-process

Weekly Downloads

14

Version

0.2.4

License

MIT

Unpacked Size

37.3 kB

Total Files

5

Last publish

Collaborators

  • jinke.li
Try on RunKit
Report malware