Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

V7.0.0 crop in pixel

See original GitHub issue


I’m just testing the new version of react-image-crop and I think there is a issue with the coords/size of crop. In the previous version I was using pixelCrop from onComplete to get the real coords/size of selection (regardless resize due to CSS). But in the new version the crop coords/size seems to be relative to a scale due to resize. This make incompatible pixelCrop from te previous version and crop of the new one. Also, the old pixelCrop is not available.

In my opinion, we should always return the real crop size, regardless a resize from the browser.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:18 (8 by maintainers)

github_iconTop GitHub Comments

frontshiftcommented, Apr 30, 2019

It took me a while to figure out that V7 is now pixel value based since the example is still based one the previous version. 🤣 The way I solved this is to update the crop in onImageLoaded, returning false so that onCropComplete / onCropChange don’t fire (documentation needs to be updated). I added a resize listener and re-calculate the crop whenever the browser size changes When I pass an updated crop back to the parent component, I convert the crop back to its original values. I think it should be relatively straightforward to support this out of the box (optional), perhaps passing a scale adjusted crop and a crop based on the natural dimensions of the image

  public componentDidMount(): void {
   this.throttledOnResize = throttle(this.updateCrop, 300, { trailing: true });
   window.addEventListener('resize', this.throttledOnResize);

  private calculateCrop(adjustForImageScale = true, crop = this.props.crop): Crop {
    let scaleFactorX;
    let scaleFactorY;
    if (adjustForImageScale) {
      scaleFactorX = this.image.width / this.image.naturalWidth;
      scaleFactorY = this.image.height / this.image.naturalHeight;
    } else {
      scaleFactorX = this.image.naturalWidth / this.image.width;
      scaleFactorY = this.image.naturalHeight / this.image.height;

    return {
      aspect: crop.aspect,
      width: Math.round(crop.width * scaleFactorX),
      height: Math.round(crop.height * scaleFactorY),
      x: Math.round(crop.x * scaleFactorX),
      y: Math.round(crop.y * scaleFactorY)

 private updateCrop = () => {
    this.setState({ crop: this.calculateCrop() });

  private onImageLoaded = (image: HTMLImageElement): boolean => {
    this.image = image;
    // we are returning false so that ReactCrop doesn't call onCropComplete() callback
    return false;

  private onCropComplete = (crop: Crop) => {
    // convert crop to original scale
    const newCrop = this.calculateCrop(false, crop);

 private onCropChange = (crop) => {
    this.setState({ crop });
DominicTobiascommented, Apr 18, 2019

Thanks for looking into this I think it’s related to using transform for x + y instead of top and left which I was doing before. I’ll check and publish a fix later (blocked at work)

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-image-crop -
Min/max crop size. Crop anything, not just images. If React Crop doesn't cover your requirements then take a look at Pintura. It features...
Read more >
How to pick image for crop from camera or gallery in Android ...
I just solve this problem on Nexus6p android N,you need grant permission to uri so the system camera can access the file wait...
Read more >
Advanced Custom Fields: Image Aspect Ratio Crop Field
Description. A field for Advanced Custom Fields that forces the user to crop their image to specific aspect ratio or pixel size after...
Read more >
Annotated List of Command-line Options - ImageMagick
Copy pixels from one area of an image to another. -crop geometry { @ }{ ! } Cut out one or more rectangular...
Read more >
How to Crop to Exact Pixel Sizes in Photoshop - YouTube - Learn how to crop your photos to exact pixel dimensions in Photoshop or Elements. Tutorial by Phil Steele.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found