react-image-crop

• Fixes a bug when setting a crop without unit specified #291

• Hold shift when nudging with keyboard to move in larger increments #284

• Point main entry to min build to avoid eval() issues #278
• Fix renderComponent issue PR #277
• Add ruleOfThirds option
• Add circularCrop option

• Add renderComponent to take over the rendering of the crop image and replace with a video for example.

• Fix % aspect crops when hitting boundaries and simplify logic to handle px and % #271

• Fix an issue calculating aspect when using % unit.

Unfortunately there is another bug when using % unit and aspect and hitting boundaries, this will be addressed in the next patch release.

• Fix to makeAspectCrop if crop with no unit is passed in #270

• Fix completing an aspect crop with width or height not defined when using % unit #266. Remember, you should do this before the image has loaded otherwise it's up to you.
• Safeguard using window and document global vars so that server side rendering doesn't error when a vdom isn't defined #267.

• 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

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.

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

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

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

• Fix max width/height clamping in makeAspectCrop #256

⚠️⚠️⚠️ Breaking changes for all users ⚠️⚠️⚠️

Units are in pixels rather than percentages.

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.

• 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,
  );
  // .........
}

• Crop area is moved with GPU accelerated css transform property.

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

6.0.17 accidentally skipped.

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

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

• 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).

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

Non-functional release

• Remove babel-plugin-transform-runtime introduced in 6.0.9 which was only used in the demo and increased bundle size by 100% (don't fear, it was still small) 😳

• Auto crop fixing: emit an onChange and onComplete with fixed dimensions if width, height, and aspect are provided but dimensions are invalid for aspect. This makes using aspect crops and switching images easier as you no longer need any special logic in onImageLoaded since the crop dimensions will be fixed for you.
• Add locked prop for when disabled or keepSelection don't quite fit the bill.