Download Size To Big

[vitorizkiimanda]

Just following demo code on https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o

and cropped then downloaded image size always way bigger than the original.

any suggestion how to avoid this?

disclaimer : already tried to lower the "pixelRatio" but the size still way bigger

[sekoyo]

You can try adjusting the last params of toBlob i.e 'image/jpg', 1, (1 means full quality but changing to a jpg from png should make a decent difference)

[vitorizkiimanda]

You can try adjusting the last params of toBlob i.e 'image/jpg', 1, (1 means full quality but changing to a jpg from png should make a decent difference)

already tried,,, reduce the size by half but still bigger than the original. SKimming through multiple issues seems un-avoid-able because the use of canvas. Thanks for reply~

if any other suggestion , im waiting

[sadikyalcin]

Have the same issue. My images get minimum x2 in size. Minimum that is. @dominictobias also the canvas size is ridiculously large. 4k width and height.

[sekoyo]

The image was doubled because on retina devices if the canvas isn't double (or more depending on the device) it is more blurry than the image. You would have to scale the canvas down before download. I have changed it to use an image and am not scaling the preview for retina devices so should be ok, though the crop preview still takes a crop of the originally sized image (before it gets scaled up or more likely down in the browser) otherwise users on e.g. a phone would get a really low res image: https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o?file=/src/App.tsx

If the image wasn't scaled down in the browser though if you right click and save the preview you will see it's true to size now

[guitorioadar]

Hello Everyone... can anyone please share any workable solution to this problem?

My Image is 10MB after cropping it ... if I crop most of the image then I am getting 120MB image... the smallest one is no less than 30MB... Can anyone please help me with it?

[chapeee]

did anyone get the solution?

[chapeee]

well i solved this, anybody who is looking for a solution

const base64Image = canvas.toDataURL('image/jpeg',0.7);

Make sure not to use JPG the right context is JPEG.