Couldn't get the circular shaped cropped output image when passing 'circularCrop' props TRUE

Hi, I’m using our REACT IMAGE CROP package and trying a thing like to crop the image into circular shape.

What I did is, as per our documentation, the cropper can be converted into CIRCLE shape when passing circularCrop props as true. Like below, <ReactCrop src={src} keepSelection={true} circularCrop={true} crop={crop} ruleOfThirds={true} onImageLoaded={this.onImageLoaded} onComplete={this.onCropComplete} onChange={this.onCropChange} />

Successfully I can get the cropper as circular shape, but the output of that cropper images is not in circular, instead its still in square/rectangle.

Is there any way to get the circle cropped image from it ?

Please find below screen grab mates,

CC: @DominicTobias , @DPr00f , @littleiffel , @PetrochukM , @DominicTobias-b1 , @arendjr, @virgofx

[jmj90]

@AndiswamyDev do you need the circular image to be downloaded or just displayed? Create a class that has a border radius of 100% and apply it to any image cropped 4/4 to achieve this. Like Dominic was saying, it makes more sense to apply the circular styling than bake it into the image. If you view the image source behind any popular social media (twitter, ig, twitch) their profile images are squares displayed with a class to make them circular.

my example:

[DominicTobias-b1]

Cool, sure thanks 😉

On Wed, 17 Mar 2021 at 15:06, Andiswamy Rajagopal @.***> wrote:

---

[External Email: Use caution with links and attachments]

Yeah @DominicTobias-b1 https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_DominicTobias-2Db1&d=DwMCaQ&c=sSVGO1PAPMGyxGLZsRfH-A&r=81xxP-d5LtxAiZTPPBF-agkqmFiZwGE6R06efZglang&m=i7Vt_QdjtT4JWlj3JuuJdWJAPG9CqlN-Yaot3iH0Aq0&s=wp75rCD9AHl3aOafpLFZOBJl4Nx2sLYDF6XEawFLSvE&e= , That’s what I tried and formed a circular clip, my friend. Thanks much for all your hands. And Can i close this Issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_DominicTobias_react-2Dimage-2Dcrop_issues_409-23issuecomment-2D800850201&d=DwMCaQ&c=sSVGO1PAPMGyxGLZsRfH-A&r=81xxP-d5LtxAiZTPPBF-agkqmFiZwGE6R06efZglang&m=i7Vt_QdjtT4JWlj3JuuJdWJAPG9CqlN-Yaot3iH0Aq0&s=r6IByJYUEdQRO38z5Rl4KeHC_LCP3PhrU8z1cIz644k&e=, or unsubscribe https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AN7W7SLSLTWNMDSAPYIGLKTTEBIH3ANCNFSM4Y3ZGWYQ&d=DwMCaQ&c=sSVGO1PAPMGyxGLZsRfH-A&r=81xxP-d5LtxAiZTPPBF-agkqmFiZwGE6R06efZglang&m=i7Vt_QdjtT4JWlj3JuuJdWJAPG9CqlN-Yaot3iH0Aq0&s=Cu5ncFWySK77ujkNNPhSoH5txGSV1nsQwshJpHyLuUA&e= .

–

Dominic Tobias Engineer, UI, Exchange Engineering Email: @.*** Direct: Address: Level 26, The Centrium, No. 60 Wyndham Street, Central, Hong Kong Website: block.one https://www.block.one

The information contained in this email is confidential together with any information contained in any attachments to this email. You should not disclose, give or copy the information to anyone other than the person(s) who are named or referenced above. The law may also protect the information as a legally privileged document and/or as a copyright work. If you have received this email and you are not the person named or referenced above, please let the sender know and delete the email from your computer (and, if applicable, your computer system(s) and server(s)). For information about how we process personal data and monitor communications please see our privacy policy https://block.one/privacy-policy/ and for terms of use please see our terms of use here. https://block.one/terms-of-use/