React-tiny-cropper

A React cropper component which compatible with lots of shaps such as rectangle,square,circle,polygon.The operation on PC or Mobile are both supportted.

Demo

Install

$ npm install react-tiny-cropper
or
$ yarn add react-tiny-cropper

properties

name	type	default	description
type	string	rectangle	the shap of cropper,circle,square,rectangle and polygon are allowed
image	string	-	the image need to crop
style	object	-	the custom style of cropper box
nodesNum	numberd	4	the number of nodes which could press to move(it's not effective unless type is "polygon")
configs	object	-	configs
onResult	fuction(url:base64)	-	The callback function that is triggered when CropperBox is moving or resizing

configs

name	type	default	description
backgroundColor	string	rgba(24,144,255,0.5)	The color of background
maskColor	string	rgba(0,0,0,0.6)	The color of mask
cropColor	string	rgba(24,144,255,1)	The color of CropperBox

Usage

import Cropper from "react-tiny-cropper";

function Demo() {
  const oncrop = (e: string) => {
      // e:base64
  };

  return(
         <Cropper
            image='XXX.png'
            onResult={oncrop}
            style={{width:"200px",height:"200px"}}
          />
    )
}