Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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, Screenshot from 2021-03-09 20-26-10

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

jmj90commented, Mar 16, 2021

@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: image

DominicTobias-b1commented, Mar 17, 2021

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 , 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, or unsubscribe .

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

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 and for terms of use please see our terms of use here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Crop a picture to fit in a shape - Microsoft Support
Crop an image to a shape, such as a circle. You can quickly change the shape of a picture by cropping it to...
Read more >
Need circular cropping functionality instead of rectangular
Image is cropped rectangular then passed to a function which display it in circular fashion. I want that image is cropped in circular...
Read more >
How to crop a photo into a circle in Photoshop - Adobe
1. Open your image in Photoshop. 2. Convert your background image into an editable layer by double-clicking your Background in the Layers panel,...
Read more >
Circular Crop Image (DriveWorks Documentation)
This Specification Macro Task will crop an image into a circular shape for which you can control the radius. You can control the...
Read more >
Circle Images - GIMP
Making a circle-shaped image¶ · First, make sure that your layer has an “alpha channel”. · Create a circular selection with the “Ellipse...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found