Automatically Handle Image Resize Calculations

[mdeslippe]

Hello,

With the current implementation, if the image element that is being used to perform the crop happens to change size, the completed crop value does not automatically update to reflect the new image dimensions. If you use the stale completed crop to attempt to process the crop with a canvas, the crop result is incorrect.

This is how I was able to get around the issue manually:

useEffect(() => {
	if (imageRef.current === null || crop === undefined) {
		return;
	}

	const resizeObserver = new ResizeObserver(() => {
		setCrop((crop) => {
			if (imageRef.current === null || crop === undefined) {
				setCompletedCrop(undefined);
				return undefined;
			} else {
				setCompletedCrop(
					convertToPixelCrop(crop, imageRef.current.width, imageRef.current.height)
				);
				return crop;
			}
		});
	});

	resizeObserver.observe(imageRef.current);
	return () => resizeObserver.disconnect();
}, [imageRef.current, crop === undefined]);

Could you please add an automatic completed crop update when the element resizes?

Thanks