7.0.0
⚠️ ⚠️ ⚠️ Breaking changes for all users ⚠️ ⚠️ ⚠️
Units are in pixels rather than percentages.
Why?
When I made this I thought it would be cool to use percentages so that if the crop image is resized then the crop area would size relatively too. This worked but made other things more awkward - setting a width and height with an aspect wasn't straight forward (since width: 10, height: 10
wouldn't be a square unless your image was), and setting max/min heights as percentages wasn't generally what people wanted.
Ultimately the library is more intuitive with pixels, at the cost that the crop area doesn't resize in the unlikely event resizing will occur when a user is cropping something. Also if you are restoring the crop but on a smaller image you will unfortunately have to resize the crop accordingly.
If you want the old behaviour feel free to stick with v6.
Breaking changes
-
Units passed into
crop { x, y, width, height }
andmaxWidth
,maxHeight
,minWidth
,minHeight
are in pixels. -
The first
crop
argument passed intoonChange
,onComplete
is the pixel crop as there is no percentage crop now. -
Library does not export
getPixelCrop
. -
makeAspectCrop
signature is now(crop, imageElement)
. -
Removed
useNaturalImageDimensions
prop. -
@types/react-image-crop package is not included as a dependency. This is a community driven package you can optionally include. Currently it is out of date with v7.
-
If creating a client size preview of crop the function should be altered as follows:
function getCroppedImg(image, crop, fileName) {
const canvas = document.createElement('canvas');
+ const scaleX = image.naturalWidth / image.width;
+ const scaleY = image.naturalHeight / image.height;
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(
image,
+ crop.x * scaleX,
+ crop.y * scaleY,
+ crop.width * scaleX,
+ crop.height * scaleY,
- crop.x,
- crop.y,
- crop.width,
- crop.height,
0,
0,
crop.width,
crop.height,
);
// .........
}
Enhancements
- Crop area is moved with GPU accelerated css
transform
property.