8.0.1

• Fix setting crop in onImageLoaded when omitting options like unit, x, and y. Remember to return false if you set the crop object in this callback. #265

8.0.0

The crop can now be in pixels or percentages and can be interchanged at any time.

This is not a breaking change for most users!

To specify the units to use for your crop (defaults to pixels) there is a new unit property on the crop object:

crop: {
  unit: '%', // % or px (can be omitted for px)
  width: 50,
  height: 50,
}

The above example would create a crop that is 50% of the image width and height. Crops are actually rendered using percentages if using the % unit, not converted at run time.

The onChange(crop, percentCrop) and onComplete(crop, percentCrop) callbacks pass both the pixel and percentage crop, you can use either one of them.

Breaking changes (not applicable to most users)

• makeAspectCrop signature changed from (crop, image) to (crop, imageWidth, imageHeight).
• containCrop signature changed from (prevCrop, crop, image) to (prevCrop, crop, imageWidth, imageHeight).
• Since it is now widely supported the mobile media query is now only (pointer: coarse) instead of (max-width: 768px), (pointer: coarse). You can override this using the $mobile-media-query SASS variable or in your CSS.

Other Changes

• Crop handles increased from 17px to 20px on touch devices to make them a bit easier to "grab" #201

7.0.5

• Re-write/simplify crop containment logic and also fix some aspect resizing bugs relating to #261

7.0.2

• Fix max width/height clamping in makeAspectCrop #256

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 } 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.

6.0.18

• Updated @types/react-image-crop dep to ^6.0.1

6.0.17 accidentally skipped.

6.0.16

• Add useNaturalImageDimensions (defaults to true). Useful in some cases where your rendered image might be slightly warped (have a different aspect) to the natural image dimensions. Otherwise ignore and leave on true.

6.0.14

• Fixes onDragStart and onDragEnd firing too many times, instead of once each #241

6.0.13

• Add renderSelectionAddon (optional)
• Render children in between image and crop selection, making it more useful for adding things like a watermark #237
• Fix issue where crop can be dragged to the left when resizing with SW ord even though it's hit the bottom of the image (with fixed aspect crops).

6.0.12

• This is a partial revert of the aspect crop fixing/completion introduced in 6.0.10 as it was proving too problematic and dangerous to validate and fix/complete aspect crops every render pass. Fixes #218.

Aspect crops will still be fixed/completed when a new image is loaded in (i.e. you can omit width or height and it will be completed for you), but it will not try and do this afterwards. This means that if you want to programatically set a new crop with an aspect then you must set the correct width and height yourself. See How to create a fixed aspect crop programmatically for more info on how to do that.