Skip to content
Compare
Choose a tag to compare

7.0.0

@DominicTobias DominicTobias released this
· 217 commits to master since this release
de05e49
Compare
Choose a tag to compare

⚠️⚠️⚠️ 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 } and maxWidth, maxHeight, minWidth, minHeight are in pixels.

  • The first crop argument passed into onChange, 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.