Making a round profilepicture by cropping an image from the photo library

Solar2D General Questions/Discussion
#1

Greetings!

i was wondering if you could describe the process you would use if you were going to crop an image from the photo library to a circled image, then save it to a file, for example “profileimage.png”. I have been browsing the internet and there seems to be some solutions, but they were made two years ago, and they are outdated.

it would be awesome if you could explain to me how you would accomplish this.

this is kind of important, because the trend of using circled profile images are growing so I think many would appreciate a proper tutorial on how you should proceed to accomplish this in a smooth and effective way.

#2

You can make a display.newCiricle and fill it with an image: http://docs.coronalabs.com/daily/api/type/ShapeObject/fill.html

#3

Hello, don’t you need graphics 2.0 to do this?

#4

That might be, I’m not sure of that.

If so you can use a mask: http://docs.coronalabs.com/daily/api/library/graphics/newMask.html

#5

but if you use mask, will the image size be compressed? or will the rest of the image only be hidden behind the mask? and how would you proceed with saving this object then?

#6

I don’t understand why you would want to save an image file as a circle though, you can just display it as a circle.

To save a circle image you would have to make parts of it transparant and that is not possible with Corona as far as I know.

Here is a recent thread about saving image smaller to file: http://forums.coronalabs.com/topic/46554-decreasing-size-of-a-photo-taken-via-mediacapturephoto/

So the work flow would be something like this:

User selects a photo from library or takes a photo.

Save it down into managble size.

When you want to show it put a mask over the edges so it looks round.

#7

Okey so lets say the user selects an image, then crops it the way he wants, after this the image is uploaded to a server, for example parse, the later when the user goes to another scene i want to load this image by using the display.loadRemoteImage, then i would need to upload the mask data to so that each image remembers its maskdata when i want to display them again. if you have used instagram for example, if you want to select a new profile pic, then you select the photo from the library then you have to move the image within a mask, and select the part of the image that you want to be shown. this is what im looking for

#8

The user presumably moves and resizes the image behind a newCircle and when he is happy presses submit button. When he presses the submit button you would use capture bounds function to capture the rectangle bounds of the circle: http://docs.coronalabs.com/daily/api/library/display/captureBounds.html

Before capturing the image I would remove the circle so you would get a rectangular image and let the mask make it a circle later. Otherwise you are stuck with whatever background is to the upper and lower edges of that circle.

Hope that is clear.

#9

ahh smooth! 

cheers!

#10

You can make a display.newCiricle and fill it with an image: http://docs.coronalabs.com/daily/api/type/ShapeObject/fill.html

#11

Hello, don’t you need graphics 2.0 to do this?

#12

That might be, I’m not sure of that.

If so you can use a mask: http://docs.coronalabs.com/daily/api/library/graphics/newMask.html

#13

but if you use mask, will the image size be compressed? or will the rest of the image only be hidden behind the mask? and how would you proceed with saving this object then?

#14

I don’t understand why you would want to save an image file as a circle though, you can just display it as a circle.

To save a circle image you would have to make parts of it transparant and that is not possible with Corona as far as I know.

Here is a recent thread about saving image smaller to file: http://forums.coronalabs.com/topic/46554-decreasing-size-of-a-photo-taken-via-mediacapturephoto/

So the work flow would be something like this:

User selects a photo from library or takes a photo.

Save it down into managble size.

When you want to show it put a mask over the edges so it looks round.

#15

Okey so lets say the user selects an image, then crops it the way he wants, after this the image is uploaded to a server, for example parse, the later when the user goes to another scene i want to load this image by using the display.loadRemoteImage, then i would need to upload the mask data to so that each image remembers its maskdata when i want to display them again. if you have used instagram for example, if you want to select a new profile pic, then you select the photo from the library then you have to move the image within a mask, and select the part of the image that you want to be shown. this is what im looking for

#16

The user presumably moves and resizes the image behind a newCircle and when he is happy presses submit button. When he presses the submit button you would use capture bounds function to capture the rectangle bounds of the circle: http://docs.coronalabs.com/daily/api/library/display/captureBounds.html

Before capturing the image I would remove the circle so you would get a rectangular image and let the mask make it a circle later. Otherwise you are stuck with whatever background is to the upper and lower edges of that circle.

Hope that is clear.

#17

ahh smooth! 

cheers!