Cropperjs as React component
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
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}
/>
);
};
- Type:
string
- Default:
null
<Cropper src="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 build
npm start
MIT