What is react-easy-crop?
react-easy-crop is a React component to crop images and videos. It provides a simple and customizable interface for cropping media, making it easy to integrate into your React applications.
What are react-easy-crop's main functionalities?
Basic Image Cropping
This feature allows you to crop an image with adjustable crop and zoom settings. The aspect ratio can also be set to maintain a specific ratio during cropping.
import React, { useState } from 'react';
import Cropper from 'react-easy-crop';
const ImageCropper = () => {
const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
return (
<div>
<Cropper
image="/path/to/image.jpg"
crop={crop}
zoom={zoom}
aspect={4 / 3}
onCropChange={setCrop}
onZoomChange={setZoom}
/>
</div>
);
};
export default ImageCropper;
Video Cropping
This feature allows you to crop a video with adjustable crop and zoom settings. The aspect ratio can also be set to maintain a specific ratio during cropping.
import React, { useState } from 'react';
import Cropper from 'react-easy-crop';
const VideoCropper = () => {
const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
return (
<div>
<Cropper
video="/path/to/video.mp4"
crop={crop}
zoom={zoom}
aspect={16 / 9}
onCropChange={setCrop}
onZoomChange={setZoom}
/>
</div>
);
};
export default VideoCropper;
Customizable Cropping Area
This feature allows you to get the cropped area details after cropping is complete. You can use this information to further process the cropped image or video.
import React, { useState } from 'react';
import Cropper from 'react-easy-crop';
const CustomCropper = () => {
const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
const [croppedArea, setCroppedArea] = useState(null);
const onCropComplete = (croppedArea, croppedAreaPixels) => {
setCroppedArea(croppedAreaPixels);
};
return (
<div>
<Cropper
image="/path/to/image.jpg"
crop={crop}
zoom={zoom}
aspect={4 / 3}
onCropChange={setCrop}
onZoomChange={setZoom}
onCropComplete={onCropComplete}
/>
{croppedArea && (
<div>
<p>Cropped Area: {JSON.stringify(croppedArea)}</p>
</div>
)}
</div>
);
};
export default CustomCropper;
Other packages similar to react-easy-crop
react-image-crop
react-image-crop is a React component for cropping images with a user-friendly interface. It offers similar functionality to react-easy-crop but focuses solely on image cropping. It provides a variety of customization options for the cropping area and supports touch devices.
react-avatar-editor
react-avatar-editor is a React component for image cropping and manipulation, specifically designed for profile pictures and avatars. It offers features like image rotation, scaling, and cropping. Compared to react-easy-crop, it provides more specialized tools for avatar editing.
cropperjs
cropperjs is a JavaScript image cropping library that can be used with React through a wrapper component. It offers extensive features for image cropping, including aspect ratio control, zooming, and rotating. While it is more feature-rich, it requires more setup compared to react-easy-crop.
react-easy-crop
A React component to crop images/videos with easy interactions
Demo
Check out the examples:
Features
- Supports drag, zoom and rotate interactions
- Provides crop dimensions as pixels and percentages
- Supports any images format (JPEG, PNG, even GIF) as url or base 64 string
- Supports any videos format supported in HTML5
- Mobile friendly
If react-easy-crop doesn't cover your needs we recommend taking a look at Pintura
Pintura features cropping, rotating, flipping, filtering, annotating, and lots of additional functionality to cover all your image and video editing needs on both mobile and desktop devices.
Learn more about Pintura
Installation
yarn add react-easy-crop
or
npm install react-easy-crop --save
Basic usage
The Cropper is styled with position: absolute
to take the full space of its parent.
Thus, you need to wrap it with an element that uses position: relative
or the Cropper will fill the whole page.
import { useState, useCallback } from 'react'
import Cropper from 'react-easy-crop'
const Demo = () => {
const [crop, setCrop] = useState({ x: 0, y: 0 })
const [zoom, setZoom] = useState(1)
const onCropComplete = (croppedArea, croppedAreaPixels) => {
console.log(croppedArea, croppedAreaPixels)
}
return (
<Cropper
image={yourImage}
crop={crop}
zoom={zoom}
aspect={4 / 3}
onCropChange={setCrop}
onCropComplete={onCropComplete}
onZoomChange={setZoom}
/>
)
}
Styles
This component requires some styles to be available in the document. By default, you don't need to do anything, the component will automatically inject the required styles in the document head. If you want to disable this behaviour and manually inject the CSS, you can set the disableAutomaticStylesInjection
prop to true
and use the file available in the package: react-easy-crop/react-easy-crop.css
.
Known issues
The cropper size isn't correct when displayed in a modal
If you are using the Cropper inside a modal, you should ensure that there is no opening animation that is changing the modal dimensions (scaling effect). Fading or sliding animations are fine.
See #428, #409, #267 or #400 for more details.
Props
Prop | Type | Required | Description |
---|
image | string | | The image to be cropped. image or video is required. |
video | string or Array<{ src: string; type?: string }> | | The video to be cropped. image or video is required. |
crop | { x: number, y: number } | ✓ | Position of the media. { x: 0, y: 0 } will center the media under the cropper. |
zoom | number | | Zoom of the media between minZoom and maxZoom . Defaults to 1. |
rotation | number (in degrees) | | Rotation of the media. Defaults to 0. |
aspect | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is 4/3 |
minZoom | number | | Minimum zoom of the media. Defaults to 1. |
maxZoom | number | | Maximum zoom of the media. Defaults to 3. |
zoomWithScroll | boolean | | Enable zoom by scrolling. Defaults to true |
cropShape | 'rect' | 'round' | | Shape of the crop area. Defaults to 'rect'. |
cropSize | { width: number, height: number } | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the aspect prop and the media size. You should probably not use this option and should rely on aspect instead. See https://github.com/ValentinH/react-easy-crop/issues/186. |
showGrid | boolean | | Whether to show or not the grid (third-lines). Defaults to true . |
zoomSpeed | number | | Multiplies the value by which the zoom changes. Defaults to 1. |
objectFit demo | 'contain', 'cover', 'horizontal-cover' or 'vertical-cover' | | Specifies how the image is shown in the cropper. contain : the image will be adjusted to be fully visible, horizontal-cover : the image will horizontally fill the cropper, vertical-cover : the image will vertically fill the cropper, cover : we automatically pick between horizontal-cover or vertical-cover to have a fully visible image inside the cropper area. Defaults to "contain". |
onCropChange | crop => void | ✓ | Called every time the crop is changed. Use it to update your crop state. |
onZoomChange | zoom => void | | Called every time the zoom is changed. Use it to update your zoom state. |
onRotationChange | rotation => void | | Called every time the rotation is changed (with mobile or multi-fingers gestures). Use it to update your rotation state. |
onCropSizeChange | cropSize => void | | Called when a change in either the cropSize width or the cropSize height occurs. |
onCropComplete | Function | | Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels (rounded to the nearest integer) |
onCropAreaChange | Function | | Very similar to onCropComplete but is triggered for every user interaction instead of waiting for the user to stop. |
transform | string | | CSS transform to apply to the image in the editor. Defaults to translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom}) with variables being pulled from props. |
style | { containerStyle: object, mediaStyle: object, cropAreaStyle: object } | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |
classes | { containerClassName: string, mediaClassName: string, cropAreaClassName: string } | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. If you have CSS specificity issues, you should probably use the disableAutomaticStylesInjection prop. |
mediaProps | object | | The properties you want to apply to the media tag ( or depending on your media) |
restrictPosition | boolean | | Whether the position of the media should be restricted to the boundaries of the cropper. Useful setting in case of zoom < 1 or if the cropper should preserve all media content while forcing a specific aspect ratio for media throughout the application. Example: https://codesandbox.io/s/1rmqky233q. |
initialCroppedAreaPercentages | { width: number, height: number, x: number, y: number} | | Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedArea passed to onCropComplete . This is the preferred way of restoring the previously set crop because croppedAreaPixels is rounded, and when used for restoration, may result in a slight drifting crop/zoom |
initialCroppedAreaPixels | { width: number, height: number, x: number, y: number} | | Use this to set the initial crop position/zoom of the cropper (for example, when editing a previously cropped media). The value should be the same as the croppedAreaPixels passed to onCropComplete Example: https://codesandbox.io/s/pmj19vp2yx. |
onInteractionStart | Function | | Called every time a user starts a wheel, touch or mousedown event. |
onInteractionEnd | Function | | Called every time a user ends a wheel, touch or mousedown event. |
onMediaLoaded | Function | | Called when media gets loaded. Gets passed an mediaSize object like { width, height, naturalWidth, naturalHeight } |
onTouchRequest | (e: React.TouchEvent<HTMLDivElement>) => boolean | | Can be used to cancel a touch request by returning false . |
onWheelRequest | (e: WheelEvent) => boolean | | Can be used to cancel a zoom with wheel request by returning false . |
disableAutomaticStylesInjection | boolean | | Whether to auto inject styles using a style tag in the document head on component mount. When disabled you need to import the css file into your application manually (style file is available in react-easy-crop/react-easy-crop.css ). Example with sass/scss @import "~react-easy-crop/react-easy-crop"; . |
setImageRef | (ref: React.RefObject<HTMLImageElement>) => void | | Called when the component mounts, if present. Used to set the value of the image ref object in the parent component. |
setVideoRef | (ref: React.RefObject<HTMLVideoElement>) => void | | Called when the component mounts, if present. Used to set the value of the video ref object in the parent component. |
setMediaSize | (size: MediaSize) => void | | [Advanced Usage] Used to expose the mediaSize value for use with the getInitialCropFromCroppedAreaPixels and getInitialCropFromCroppedAreaPercentages functions. See this CodeSandbox instance for a simple example. |
setCropSize | (size: Size) => void | | [Advanced Usage] Used to expose the cropSize value for use with the getInitialCropFromCroppedAreaPixels and getInitialCropFromCroppedAreaPercentages functions. See this CodeSandbox instance for a simple example. |
nonce | string | | The nonce to add to the style tag when the styles are auto injected. |
keyboardStep | number | | number of pixels the crop area moves with each press of an arrow key when using keyboard navigation. Defaults to 1. |
onCropComplete(croppedArea, croppedAreaPixels)
This callback is the one you should use to save the cropped area of the media. It's passed 2 arguments:
croppedArea
: coordinates and dimensions of the cropped area in percentage of the media dimensioncroppedAreaPixels
: coordinates and dimensions of the cropped area in pixels.
Both arguments have the following shape:
const area = {
x: number,
y: number,
width: number,
height: number,
}
onCropAreaChange(croppedArea, croppedAreaPixels)
This is the exact same callback as onCropComplete
, but is triggered for all user interactions.
It can be used if you are not performing any render action on it.
croppedArea
: coordinates and dimensions of the cropped area in percentage of the media dimensioncroppedAreaPixels
: coordinates and dimensions of the cropped area in pixels.
Both arguments have the following shape:
const area = {
x: number,
y: number,
width: number,
height: number,
}
onMediaLoaded(mediaSize)
Called when media gets successfully loaded. This is useful if you want to have a custom zoom/crop
strategy based on media size.
Example:
const CONTAINER_HEIGHT = 300
const CroppedImage = ({ image }) => {
const [crop, onCropChange] = React.useState({ x: 0, y: 0 })
const [zoom, onZoomChange] = React.useState(1)
return (
<Cropper
image={image}
crop={crop}
zoom={zoom}
onCropChange={onCropChange}
onZoomChange={onZoomChange}
onMediaLoaded={(mediaSize) => {
// Adapt zoom based on media size to fit max height
onZoomChange(CONTAINER_HEIGHT / mediaSize.naturalHeight)
}}
/>
)
}
getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages: Area, mediaSize: MediaSize, rotation: number, cropSize: Size, minZoom: number, maxZoom: number)
[Advanced Usage]
Used to calculate values for crop and zoom based on a desired croppedAreaPercentages
value. See this CodeSandbox instance for a simple example.
getInitialCropFromCroppedAreaPixels(croppedAreaPixels: Area, mediaSize: MediaSize, rotation: number, cropSize: Size, minZoom: number, maxZoom: number)
[Advanced Usage]
See getInitialCropFromCroppedAreaPercentages
.
Development
yarn
yarn start
Now, open http://localhost:3001/index.html
and start hacking!
License
MIT
Maintainers
This project is maintained by Valentin Hervieu.
This project was originally part of @ricardo-ch organisation because I (Valentin) was working at Ricardo.
After leaving this company, they gracefully accepted to transfer the project to me. ❤️
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!