React-polygon-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

Example

Install

1
2
3
$ 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Cropper from "../src/index";

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

  return(
         <Cropper
            image={customImage}
            onResult={oncrop}
            type="polygon"
            nodesNum={10}
            style={{width:"200px",height:"200px"}}
          />
    )
}