A responsive image cropping tool for React
ISC License
Published by DominicTobias about 5 years ago
unit
specified #291Published by DominicTobias about 5 years ago
Published by DominicTobias about 5 years ago
renderComponent
issue PR #277Published by DominicTobias over 5 years ago
Published by DominicTobias over 5 years ago
Published by DominicTobias over 5 years ago
%
unit.Unfortunately there is another bug when using %
unit and aspect and hitting boundaries, this will be addressed in the next patch release.
Published by DominicTobias over 5 years ago
makeAspectCrop
if crop with no unit
is passed in #270Published by DominicTobias over 5 years ago
%
unit #266. Remember, you should do this before the image has loaded otherwise it's up to you.window
and document
global vars so that server side rendering doesn't error when a vdom isn't defined #267.Published by DominicTobias over 5 years ago
onImageLoaded
when omitting options like unit
, x
, and y
. Remember to return false
if you set the crop object in this callback. #265Published by DominicTobias over 5 years ago
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)
.(pointer: coarse)
instead of (max-width: 768px), (pointer: coarse)
. You can override this using the $mobile-media-query
SASS variable or in your CSS.Published by DominicTobias over 5 years ago
Published by DominicTobias over 5 years ago
makeAspectCrop
#256Published by DominicTobias over 5 years ago
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,
);
// .........
}
transform
property.Published by DominicTobias over 5 years ago
^6.0.1
6.0.17 accidentally skipped.
Published by DominicTobias over 5 years ago
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
.Published by DominicTobias over 5 years ago
onDragStart
and onDragEnd
firing too many times, instead of once each #241Published by DominicTobias over 5 years ago
Published by DominicTobias almost 6 years ago
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.
Published by DominicTobias almost 6 years ago
Non-functional release
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) 😳Published by DominicTobias almost 6 years ago
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.disabled
or keepSelection
don't quite fit the bill.