V7.0.0 crop in pixel

Hi!

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.

[frontshift]

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;
    this.updateCrop();
    // 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);
    this.props.onCropChange(newCrop);
  }

 private onCropChange = (crop) => {
    this.setState({ crop });
  }

[DominicTobias]

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)