Incorrect corp area output when the input is SVG

ValentinH / react-easy-crop

A React component to crop images/videos with easy interactions

https://valentinh.github.io/react-easy-crop/

MIT License

2.27k stars 167 forks source link

Incorrect corp area output when the input is SVG #381

Open JohnCido opened 2 years ago

JohnCido commented 2 years ago

Describe the bug When trying to crop an SVG file, the final output cropped area is wrong. So any code that relies on this output will generate wrong image output.

To Reproduce Steps to reproduce the behavior:

Open this sandbox
Download this image
Open this file in the sandbox
Crop it and see the output

Expected behavior Crop the exact area that the user has defined using the cropper.

Please create a CodeSandbox that demonstrates your issue. You can fork the Basic example: https://codesandbox.io/s/react-easy-crop-v69ly910ql.

ValentinH commented 2 years ago

Indeed, something is wrong with the sizes computation. First thing I noticed is that naturalWidth/naturalHeight doesn't exist for SVGs and we are using this to measure to media size here: https://github.com/ValentinH/react-easy-crop/blob/4e31ef20a95f3e759aedc57e70788d778067eb52/src/Cropper.tsx#L245-L246

I guess we should use width/height in that case but we need to check if something else needs to be adjusted.

raed667 commented 2 years ago

Cropping works with some other SVGs, for example this image https://user-images.githubusercontent.com/1442690/182855138-e84d1916-8a19-4152-89a8-4c9074f54dfd.svg

Could it be that the difference is that the original svg has width="100%" height="100%" viewBox="0 0 3200 3200" and my example has width="640" height="480" viewBox="0 0 640 480" ?

tonyfarney commented 1 month ago

I am facing the same issue here. Is there some workaround?