can I save the circle cropped image as circle ( other parts are transparent ) instead of rectangle?

[astw]

I need to crop the image into a circle, and save only the circled part, other parts outside the circle should be saved as transparent. How can I do that?

[tylerslater-io]

It is not a feature of this directive. From the documentation:

It's highly recommended to store the image as a square on your back-end, because this will enable you to easily update your pics later, if you decide to implement some design changes. Showing a square image as a circle on the front-end is not a problem - it is as easy as adding a border-radius style for that image in a css.

I would second that recommendation because doing a css border radius is much cleaner and future-proofs your images.

[astw]

@tsl8r Mine scenario is different. My website allows a user to upload a file, crop it, and add the output to a canvas. So I need to save it as circle, or event fancy as an ellipse.

[tylerslater-io]

@astw Got it, so the user is actually downloading the file locally as a circle?

[astw]

@tsl8r Yes, the user is getting an image as a circle.

[isaacdre]

This would be more in the fashion of image manipulation. Instead of getting a library to do this custom bit, why don't you do the custom part yourself via a geometry hack?

1. use ngImgCrop to select the image circle and output the square.
2. Using the Height of the Square, calculate the radius of the circle you want to create: r = H/2
3. Calculate the centerpoint of the circle from the top left corner of the square: centerpoint = x: H/2, y: -H/2
4. Convert image into an array of pixels.
5. Loop through each pixel ... (Yes there is a much faster way of doing this, but for now I'm going for the easiest to code): Calculate the pixel distance from the centerpoint "d". If d > r, replace pixel it with a transparent pixel.
6. Convert resulting array of pixels back into the object you want to deal with.

?? IDK, that might be faster than waiting on another library to come out and support what you are trying to do. Additionally, I have to imagine that this is already supported in some other libraries... why not look there instead?