How to get the cropped image client-side?

[anshul-kai]

getImage returns the original image ignoring scale and crop/position.

getImageScaledToCanvas returns the original image scaled down to the canvas dimensions, again ignoring both scale and crop/position.

I'm working through a hacky approach to generate the cropped image client-side. Isn't there an easy way to provide this via the current API?

[anshul-kai]

For anything beyond a baseline use case, use react-advanced-cropper.

This library is full of bugs if advanced features like scaling or cropping are used.

[aman-plugenergy]

Not sure why this doesn't work for you. I am using v13.0.2 and both crop and zoom work as expected when using the getImageScaledToCanvas function.

I am using the ref as mentioned with the following code:

// To define the ref
const editor = useRef<AvatarEditor>(null);

// Attach ref to the component
<AvatarEditor
	ref={editor}
	image={image}
	width={250}
	height={250}
	border={25}
	borderRadius={125}
	color={[255, 255, 255, 0.6]} // RGBA
	scale={zoom}
	rotate={rotation}
	className='rounded-sm'
/>

// Access the canvas and convert to file for upload to backend (inside an event handler function)
if (editor.current) {
	editor.current.getImageScaledToCanvas().toBlob((blob) => {
		if (blob) {
			const file = new File([blob], 'updatedImage.png', {
				type: 'image/png',
			});

			// Rest of code here...
		} 
	});
}