0.1.8 • Published 1 year ago
react-tiny-cropper v0.1.8
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-cropperproperties
| 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"}}
/>
)
}