Crop Image with Ionic 3 Camera ( Square => Circle)

Hello everyone,
I want crop an image with circle frame. But I use ionic’s camera, it can only show square frame. How to change the shape of the frame ?

What do you want to do with the circled image? It might be easier to just display the square picture behind a circle mask.

I want the image of the frame to be a circle to accurately represent the outward image as a circle like an avatar.

Ok, so it has to be that way during taking the photo?

Yes, sir. I want show crop view with circle frame after taking a photo.

After taking the photo or during taking the photo?
After is easy: Just add a mask on top of the picture which is only transparent in the middle circle.
During is harder, as you have to adapt the plugin you are using to show the camera a differnet way.

I want to find a solution to reuse the crop functions. How to add mask on top of crop view
but we don’t need to create another class ?


This seems to have an option for a circular crop, I would give it a try

if there is only the need that you show only same parts of an image, then css clip methode is maybe what you are looking for . Qucik and easy see here
How to add, change or remove css class dynamically you can use ngClass or ngStyle.

Best regrads ,a nna-liebt

i can’t use it in ionic 3.

it’s a plugin native i can’t not use this css.

hmmm, maybe I understood it wrong, but how do you display the image after taken? If you show it in a html container, then you can use css.
Best regards, anna-liebt

1 Like

They want to display the circle when taking the photo. That will probably require modifications on the native code of whatever camera plugin they are using.

Yes, Sir. I use this screen of native camera plugin and i want change frame of native code.

Then you will have to tell us which plugin you are using for the camera, and then we can do you work and see if there is a built-in way to change the overlay. If not, you will have to fork the plugin and do that yourself.