Cropping the outside of that mask (in this case the face shape) in transparent png is still not possible with Corona SDK right? I want to implement a simple circular IOS style avatar and I would like to not overlay a square image with a circle mask if at all possible but rather actually crop my image with a circle overlay and make the rest of the image a transparent png background. Any ideas? Thanks in advance.
Hi ksan,
I’m not 100% sure I follow what you are describing, but I’m pretty sure the code below should accomplish this. It’s a slightly-modified version of what I posted last night, but instead of applying a camera fill to a rect, I apply it to a circle - and I made it so that when you tap the circle, it creates a new display object of the current camera frame using display.capture(). So the captured image is displayed in a circle, with transparent background, without having to use a mask. Download http://www.jasonschroeder.com/misc/circleAvatar.zip and run it on-device to see if I got this right. Here’s the main.lua from that download:
display.setDefault( "cameraSource", "front" ) -- CREATE VISUALS: local group = display.newGroup() local background = display.newImage( group, "background.png", 160, 240 ) local camera = display.newCircle( group, 160, 240, 120 ) camera:setFillColor(0) camera.strokeWidth = 6 camera:setStrokeColor(1) camera.fill = { type="camera" } -- FUNCTION TO UPDATE CAMERA: local function updateCamera() camera.fill = { type="camera" } end -- FUNCTION TO CREATE AVATAR FROM CAMERA FEED: local function makeAvatar() camera:removeEventListener("tap", makeAvatar) Runtime:removeEventListener("enterFrame", updateCamera) local avatar = display.newGroup() local photo = display.capture(camera) local border = display.newCircle(avatar, 0, 0, photo.contentWidth\*.5 + 3) avatar:insert(photo) group:insert(avatar) avatar.x, avatar.y = camera.x, camera.y display.remove(camera) end -- EVENT LISTENERS: Runtime:addEventListener("enterFrame", updateCamera) camera:addEventListener("tap", makeAvatar)Hi Jason,
Thank you so much for your followup. I will try your updated code right away. Piecing your earlier code + the CL tutorial I had a similar effort. Now I need to save that resulting circular avatar file to disk. What I’m trying to get to is a square png file (as all image files are rectangles or squares) in which the avatar is a circle and the remaining space inside the square is transparent.
I did put together two images showing what I’m trying to get. You can find them at the following links :
https://dl.dropboxusercontent.com/u/16928994/images/good_avatar.png
and
https://dl.dropboxusercontent.com/u/16928994/images/bad_avatar.png
Hope this will explain better.
Best Regards,
Kerem
I’m happy to report that
display.save( avatar, { filename=“avatar.png”, baseDir=system.DocumentsDirectory, isFullResolution=false } )
does exactly what is needed. You get a nice circle avatar with the rest of space around it a transparent png. I thought this was not possible and I’m happy to find out that the API does this by default. Super!
Hi Jason,
Strange thing is happening when I put a display.save into the mix. The image displayed on screen jumps to lower right corner as soon as display.save is called and the image saved into avatar.png is only a quarter of the circle which is visible on screen. Here’s what I’m working with which is essentially your example with the display.save so I can get the png file of the avatar. I appreciate any insight you might have as to why display.save is changing the anchor points or x,y before saving my file. I must be missing something here but the display.save API doc does not offer any clues.
display.setDefault( "cameraSource", "front" ) -- CREATE VISUALS: local group = display.newGroup() local xCenter = display.contentWidth \* 0.5 local yCenter = display.contentHeight \* 0.5 local cameraLens = display.newCircle( group, xCenter, yCenter, 120 ) cameraLens:setFillColor(0) cameraLens.strokeWidth = 6 cameraLens:setStrokeColor(1) cameraLens.fill = { type="camera" } -- FUNCTION TO UPDATE CAMERA: local function updateCamera() cameraLens.fill = { type="camera" } end -- FUNCTION TO CREATE AVATAR FROM CAMERA FEED: local function makeAvatar() cameraLens:removeEventListener("tap", makeAvatar) Runtime:removeEventListener("enterFrame", updateCamera) local avatar = display.newGroup() local photo = display.capture(cameraLens) local border = display.newCircle(avatar, xCenter, yCenter, photo.contentWidth \* .5 + 1) avatar:insert(photo) group:insert(avatar) avatar.anchorX, avatar.anchorY = 0.5, 0.5 avatar.x, avatar.y = cameraLens.x, cameraLens.y display.save( avatar, { filename="avatar.png", baseDir=system.DocumentsDirectory, isFullResolution=false } ) display.remove(cameraLens) end -- EVENT LISTENERS: Runtime:addEventListener("enterFrame", updateCamera) cameraLens:addEventListener("tap", makeAvatar)Ok. Here’s the solution. Compliments of @Renato - Red Beach. Thank you so very much Renato for letting me know what to do to fix this.
-- FUNCTION TO CREATE AVATAR FROM CAMERA FEED: local function makeAvatar() cameraLens:removeEventListener("tap", makeAvatar) Runtime:removeEventListener("enterFrame", updateCamera) local photo = display.capture(cameraLens) photo.x, photo.y = cameraLens.x, cameraLens.y display.save( photo, { filename="avatar.png", baseDir=system.DocumentsDirectory, isFullResolution=false } ) display.remove(cameraLens) endThanks @Renato for finding the solution so quickly! Sorry I wasn’t quicker on the draw, ksan. Have a good weekend all!
Hey Jason, thanks so much for chiming in anyways. You set us on the right track in the first place. Thank you so much!!! Now I can capture my avatars nice & round! 
Have a wonderful weekend