How to access the cropped image?

jmancherje commented 8 years ago

Is there an elegant way to take the cropped state and access the cropped image? I would like to crop the image and submit the cropped image to a server and subsequently send to amazon S3 for storage. How can I access the image after cropping to attach to an ajax request?

jmancherje commented 8 years ago

I think I may have misunderstood the expected use of this library, with my use case above, would it be best to send the image and the crop object to the server and actually crop the image on the server with a image processing library?

sekoyo commented 8 years ago

The traditional approach is to do it server side, however it is achievable on the client. I believe that @DPr00f has done that https://github.com/DominicTobias/react-image-crop/issues/21#issuecomment-188857644 and some similar info here https://gist.github.com/DominicTobias/b1fb501349893922ec7f

To summarise -

Using the original image you need to draw the cropped image on a canvas element. You can get a reference to the image from onImageLoaded(crop, image) (2nd param) if you need to.
Then once you've created the canvas and drawn the cropped image on it, you can extract the data with toDataURL (or toBlob but it's only supported on latest Chrome and FF)

Edit: This is on the CodeSandbox demos now

jmancherje commented 8 years ago

Thank you for the info. I followed your first comment and did the cropping server side with Jimp, works great. Love the component

sekoyo / react-image-crop

How to access the cropped image? #32