react-cropper
Cropperjs as React component
Demo
Docs
Installation
Install via npm
npm install --save react-cropper
You 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
Quick Example
import React, { useRef } from "react";
import Cropper, { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";
const Demo: React.FC = () => {
const cropperRef = useRef<ReactCropperElement>(null);
const onCrop = () => {
const cropper = cropperRef.current?.cropper;
console.log(cropper.getCroppedCanvas().toDataURL());
};
return (
<Cropper
src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
style={{ height: 400, width: "100%" }}
// Cropper.js options
initialAspectRatio={16 / 9}
guides={false}
crop={onCrop}
ref={cropperRef}
/>
);
};
Options
src
- Type:
string
- Default:
null
<Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />
alt
- Type:
string
- Default:
picture
crossOrigin
- Type:
string
- Default:
null
dragMode
https://github.com/fengyuanchen/cropperjs#dragmode
scaleX
https://github.com/fengyuanchen/cropperjs#scalexscalex
scaleY
https://github.com/fengyuanchen/cropperjs#scalexscaley
enable
https://github.com/fengyuanchen/cropperjs#enable
disable
https://github.com/fengyuanchen/cropperjs#disable
zoomTo
https://github.com/fengyuanchen/cropperjs#zoomto
rotateTo
https://github.com/fengyuanchen/cropperjs#rotateto
Other options
Accept all options in the docs as properties.
Methods
Use the cropper
instance from onInitialized
to access cropperjs methods
Build
npm run build
Development
npm start
Author
Maintainer
License
MIT