Image crop out of bounds on load

Hello. I am trying to get my image cropped immediately on load within set aspect road. however when using the code below, from the documentation here, my crop ends up being incorrect.

  const onLoad = useCallback(img => {
    imgRef.current = img;
  
    const aspect = 16 / 9;
    const width = img.width / aspect < img.height * aspect ? 100 : ((img.height * aspect) / img.width) * 100;
    const height = img.width / aspect > img.height * aspect ? 100 : (img.width / aspect / img.height) * 100;
    const y = (100 - height) / 2;
    const x = (100 - width) / 2;
  
    setCrop({
      unit: '%',
      width,
      height,
      x,
      y,
      aspect,
    });
  
    return false; // Return false if you set crop state in here.
  }, []);

https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-forked-sy59w?file=/src/App.js:1127-1683

This is the image:

and here is how it looks after load:

and here is how i expect it to look:

[DominicTobias]

Thanks I’ve updated the documentation and added some helpers to make it easier to do % images now, in v10:

function onImageLoad(e) {
  const { width, height } = e.currentTarget

  const crop = centerCrop(
    makeAspectCrop(
      {
        unit: '%',
        width: 100,
      },
      16 / 9,
      width,
      height
    ),
    width,
    height
  )

  setCrop(crop)
}

It’s also on the codesandbox link: https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o

[gschier]

Could you please share exactly what you did to avoid this issue. This would be really helpful, thanks.

Sure, here’s my full function that gets the default crop based on the image size and the size of the element that contains the crop component. I hope it helps @supasus!

function getDefaultCrop(img: ResizeImageResult, clientWidth: number, clientHeight: number): Crop {
  const aspect = 0.6; // Locked aspect for crop rectangle
  const padding = 20; // How many pixels to leave around the crop rectangle

  // Calculate the max width/height of the image based on its size and the crop container
  const imgAspect = img.width / img.height;
  const imgWidthMax = Math.min(img.width, clientWidth);
  const imgHeightMax = Math.min(img.height, clientHeight);

  // Calculate size of image based on aspect and max width/height
  const imgWidth = imgHeightMax * imgAspect < clientWidth ? imgHeightMax * imgAspect : imgWidthMax;
  const imgHeight = imgWidthMax / imgAspect < clientHeight ? imgWidthMax / imgAspect : imgHeightMax;

  // Calculate the default crop rectangle based on image size and crop aspect
  const width = (imgHeight * aspect < imgWidth ? imgHeight * aspect : imgWidth) - padding;
  const height = (imgWidth / aspect < imgHeight ? imgWidth / aspect : imgHeight) - padding;

  // Position crop rectangle in the exact center
  const x = (imgWidth - width) / 2;
  const y = (imgHeight - height) / 2;

  return { aspect, width, height, x, y, unit: 'px' };
}