Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

How can I implement this function?
Started by pickerel Jun 26 2014 12:25 AM

14 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

[TOPIC: post.html]
#2

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

Hi @pickerel,

This is not possible at this time (drawing some image over the top of the camera view). You may be able to do it with Corona Cards, and almost certainly with Enterprise, but not in the current SDK at this time.

 

Best regards,

Brent 



[TOPIC: post.html]
#3

J. A. Whye

[GLOBAL: userInfoPane.html]
J. A. Whye
  • Corona Geek

  • 1,689 posts
  • Corona SDK

With native.newVideo() http://docs.coronalabs.com/api/library/native/newVideo.html you can move and rotate the video object. Can you also change the opacity (alpha)?

 

If so, could you then show the face outline underneath the video, with the video "ghosted" down so the face outline shows through? I could imagine it looking decent enough for use (but have not tried it).

 

Hang on...

 

Okay, native newVideo doesn't work with live video. But if you can fill a shape with a live video image, why can't you make the shape the size of the screen, overlay the face outline, and then hide the outline and do display.captureScreen when the camera button is tapped?

 

True, the picture would only be the resolution of the device, but depending on what you're doing it may be "good enough."

 

 Jay



[TOPIC: post.html]
#4

schroederapps

[GLOBAL: userInfoPane.html]
schroederapps
  • Contributor

  • 466 posts
  • Corona SDK

@pickerel - this is absolutely do-able, at least on iOS. You just need to apply a camera fill to a display.newRect() and then you can layer whatever you want on top of it. I've whipped up a *very* simple test app that works on-device (camera fills are not possible in the simulator) - keep in mind that all it does it place a dummy overlay on top of the camera fill object, but it gives you a place to start. It will definitely require a lot of tweaking to make it fully-functional as an app - there's a link to it below. Also, below are some links to articles and API docs that should help you...

 

(BTW, your timing is great...up until just this week, we were only able to use the rear-facing camera, but Corona Labs just enabled front-facing camera access in just the last couple of days!)

 

Enjoy!

 



[TOPIC: post.html]
#5

RedBeach

[GLOBAL: userInfoPane.html]
RedBeach
  • Corona Geek

  • 1,132 posts
  • Corona SDK

Yes, that is possible to do on iOS using the Camera Fill as @schroederapps mentioned.

 

 

For Android, I created a plugin to do that (to show the camera inside the app) and I can send it you. But since we don't have a plugin marketplace for Pro users, it will only work for you if you have a Corona Enterprise license...



[TOPIC: post.html]
#6

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

@schroederapps, tried your sample code now and it works exactly as advertised! Thank you so much for sharing your code. 



[TOPIC: post.html]
#7

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

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. 



[TOPIC: post.html]
#8

schroederapps

[GLOBAL: userInfoPane.html]
schroederapps
  • Contributor

  • 466 posts
  • Corona SDK

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)


[TOPIC: post.html]
#9

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

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



[TOPIC: post.html]
#10

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

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! 



[TOPIC: post.html]
#11

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

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)


[TOPIC: post.html]
#12

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

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)
end


[TOPIC: post.html]
#13

schroederapps

[GLOBAL: userInfoPane.html]
schroederapps
  • Contributor

  • 466 posts
  • Corona SDK

Thanks @Renato for finding the solution so quickly! Sorry I wasn't quicker on the draw, ksan. Have a good weekend all!



[TOPIC: post.html]
#14

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

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



[TOPIC: post.html]
#15

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

@schroederapps, the sample code works fine on iPad, thanks for your kind help.




[topic_controls]
[/topic_controls]