CropperJS wrapped in a React component
See the CropperJS Documentation for more information
Inspiration taken from react-cropper
npm install --save ddm-react-cropperjsNOTE: You must include the cropper.css (or cropper.min.css) file in your project. It can be found in node_modules/cropperjs/dist.
The image source URL.
- Required
- Type:
string - Default:
null
The text for the image alt attribute.
- Type:
string - Default:
picture
Set the aspect ratio of the crop box. By default, the crop box is free ratio.
- Type:
number - Default: N/A
https://github.com/fengyuanchen/cropperjs#aspectratio
Change the canvas (image wrapper) position and size with new data.
- Type:
object - Default:
null
canvasData = {
left: 200,
top: 200,
width: 600,
height: 400
}https://github.com/fengyuanchen/cropperjs#setcanvasdatadata
This event fires when the canvas (image wrapper) or the crop box changed.
- Type:
function - Default: N/A
Parameters
- event: Custom event object
- dataURL: The cropped image data URL returned in the format specified in the imgType prop
<ReactCropperJS
crop={(event, dataURL)} => {
console.log(event.detail);
this.img.src = dataURL;
}}
/>https://github.com/fengyuanchen/cropperjs#crop-2
Change the crop box position and size with new data.
- Type:
object - Default:
null
cropBoxData = {
left: 200,
top: 200,
width: 600,
height: 400
}https://github.com/fengyuanchen/cropperjs#setcropboxdatadata
This event fires when the canvas (image wrapper) or the crop box stops changing.
- Type:
function - Default: N/A
Parameters
- event: Custom event object
- dataURL: The cropped image data URL returned in the format specified in the imgType prop
<ReactCropperJS
cropend={(event, dataURL)} => {
console.log(event.detail);
this.img.src = dataURL;
}}
/>https://github.com/fengyuanchen/cropperjs#cropend-1
This event fires when the canvas (image wrapper) or the crop box is changing.
- Type:
function - Default: N/A
Parameters
- event: Custom event object
- dataURL: The cropped image data URL returned in the format specified in the imgType prop
<ReactCropperJS
cropmove={(event, dataURL)} => {
console.log(event.detail);
this.img.src = dataURL;
}}
/>https://github.com/fengyuanchen/cropperjs#cropmove-1
This event fires when the canvas (image wrapper) or the crop box starts to change.
- Type:
function - Default: N/A
Parameters
- event: Custom event object
- dataURL: The cropped image data URL returned in the format specified in the imgType prop
<ReactCropperJS
cropstart={(event, dataURL)} => {
console.log(event.detail);
this.img.src = dataURL;
}}
/>https://github.com/fengyuanchen/cropperjs#cropstart-1
The value to set crossOrigin attribute to on the img element. Related to the checkCrossOrigin option.
- Type:
string - Default:
null
More info on the crossOrigin attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
Change the cropped area position and size with new data (based on the original image).
- Type:
object - Default:
null
https://github.com/fengyuanchen/cropperjs#setdatadata
Change the drag mode.
- Type:
string - Default:
crop - Options:
none,crop,move
https://github.com/fengyuanchen/cropperjs#dragmode
Boolean flag to enable or disable the component. Setting the value to false will disable it.
- Type:
bool - Default:
true
https://github.com/fengyuanchen/cropperjs#enable
https://github.com/fengyuanchen/cropperjs#disable
The image type to return when getting the cropped image data URL from the canvas using toDataURL.
Valid options are image/png, image/jpeg, and image/webp. If the data URL returned shows that the format is PNG,
then that means the image type submitted is not supported.
- Type:
string - Default:
image/jpeg
For more information see the type parameter here:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
The quality of the image to return when getting the cropped image data URL from the canvas using toDataURL.
Should be a value between 0 and 1 (a percentage). If the value is anything else, the default value of 0.92 will be used.
- Type:
number - Default:
0.92
For more information see the encoderOptions parameter here:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Move the canvas (image wrapper) to an absolute point.
- Type:
array - Default: N/A
moveTo = [
100, // X value
200 // Y value
]https://github.com/fengyuanchen/cropperjs#movetox-y
This event fires when the target image has been loaded and the cropper instance is ready for cropping.
- Type:
function - Default: N/A
https://github.com/fengyuanchen/cropperjs#ready-1
Rotate the image to an absolute degree.
- Type:
number - Default:
0
https://github.com/fengyuanchen/cropperjs#rotatetodegree
Scale the abscissa of the image.
- Type:
number - Default:
1
https://github.com/fengyuanchen/cropperjs#scalexscalex
Scale the ordinate of the image.
- Type:
number - Default:
1
https://github.com/fengyuanchen/cropperjs#scaleyscaley
Custom styles for the component placed on the wrapping element of the component.
- Type:
object - Default:
null
This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).
- Type:
function - Default: N/A
Parameters
- event: Custom event object
- dataURL: The cropped image data URL returned in the format specified in the imgType prop
<ReactCropperJS
zoom={(event, dataURL)} => {
console.log(event.detail);
this.img.src = dataURL;
}}
/>https://github.com/fengyuanchen/cropperjs#zoom-1
Zoom the canvas (image wrapper) to an absolute ratio.
- Type:
number - Default:
1
https://github.com/fengyuanchen/cropperjs#zoomtoratio
Accepts all options found in the CropperJS documentation as props. Except for the props listed above, all props passed in are set only when the component is mounted and cannot be changed unless the component is unmounted and re-mounted.