react-cropper
Cropperjs as React componentDemo
Click for a DemoDocs
Installation
Install via npmnpm 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
laterQuick 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#dragmodescaleX
https://github.com/fengyuanchen/cropperjs#scalexscalexscaleY
https://github.com/fengyuanchen/cropperjs#scalexscaleyenable
https://github.com/fengyuanchen/cropperjs#enabledisable
https://github.com/fengyuanchen/cropperjs#disablezoomTo
https://github.com/fengyuanchen/cropperjs#zoomtorotateTo
https://github.com/fengyuanchen/cropperjs#rotatetoOther options
Accept all options in the docs as properties.Methods
Use thecropper
instance from onInitialized
to access cropperjs methodsBuild
npm run build
Development
npm start