Cropperjs as React component
Install via npm
npm install --save react-cropperYou need cropper.css in your project which is from cropperjs. Since this project have dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later
importReact,{useRef}from"react";importCropper,{ReactCropperElement}from"react-cropper";import"cropperjs/dist/cropper.css";constDemo: React.FC=()=>{constcropperRef=useRef<ReactCropperElement>(null);constonCrop=()=>{constcropper=cropperRef.current?.cropper;console.log(cropper.getCroppedCanvas().toDataURL());};return(<Croppersrc="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"style={{height: 400,width: "100%"}}// Cropper.js optionsinitialAspectRatio={16/9}guides={false}crop={onCrop}ref={cropperRef}/>);};- Type:
string - Default:
null
<Croppersrc="http://fengyuanchen.github.io/cropper/images/picture.jpg"/>- Type:
string - Default:
picture
- Type:
string - Default:
null
https://github.com/fengyuanchen/cropperjs#dragmode
https://github.com/fengyuanchen/cropperjs#scalexscalex
https://github.com/fengyuanchen/cropperjs#scalexscaley
https://github.com/fengyuanchen/cropperjs#enable
https://github.com/fengyuanchen/cropperjs#disable
https://github.com/fengyuanchen/cropperjs#zoomto
https://github.com/fengyuanchen/cropperjs#rotateto
Accept all options in the docs as properties.
Use the cropper instance from onInitialized to access cropperjs methods
npm run buildnpm startMIT
