Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

display.save() causing image to disappear
Started by AlanPlantPot Dec 23 2013 05:39 AM

13 replies to this topic
display.save camera image display save
[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

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

I have an app which allows the user to take a picture from either the camera or gallery. 

The app then saves this image to the TemporaryDirectory, rescales it to 0.25, saves a thumbnail, and then rescales back to 1.

 

It worked fine before, but recently we have noticed that the images kept being displayed as black squares, sometimes with text in them. If I look in the sandbox then the images in the temp directory appear to be fine though.

 

I've made a quick sample, and I've found that when display.save is called, the image disappears entirely:

 

local _W, _H = display.contentWidth, display.contentHeight

local isSimulator = "simulator" == system.getInfo("environment")
local photo

local function onCamera(e)

	local onComplete = function(event)
		
		if event.target then
			--remove photo if it already exists
			if photo then 
				photo:removeSelf()
				photo = nil
			end

			local photogroup = display.newGroup() 

			photo = event.target
	       	photo.x, photo.y = _W * 0.5, _W * 0.5
	       	photogroup:insert(photo)

		   	--save image --THIS CAUSES IMAGE TO DISAPPEAR
	      	local baseDir = system.TemporaryDirectory
	      	display.save(photogroup, "myPhoto.jpg", baseDir) 
	       
 		end
	 		  		
	end


	local function onChoiceComplete(event)
        if event.index == 1 then
            if not isSimulator then
		 		local filePath = { baseDir = system.TemporaryDirectory, filename = "CameraShot.jpg" }
				media.show( media.Camera, onComplete )
			else				
				media.show( media.Camera, onComplete)
			end
        elseif event.index == 2 then
        	if media.hasSource( media.PhotoLibrary ) then
		   		if not isSimulator then
			 		local filePath = { baseDir = system.TemporaryDirectory, filename = "CameraShot.jpg" }
					media.show( media.PhotoLibrary, onComplete )
				else		
					media.show( media.PhotoLibrary, onComplete)
				end
		   	end
        end
    end

    if e.phase == "ended" then
        local alert = native.showAlert( "Photo", "Choose photo from:", { "Camera","Gallery"},onChoiceComplete )
    end
end


local background = display.newRect(_W * 0.5, _H * 0.5, _W, _H)
background:setFillColor( 1, 0, 0 )

local cameraButton = display.newRoundedRect(_W * 0.5, 50, 50, 50, 10)
cameraButton:addEventListener( "touch", onCamera )
cameraButton.strokeWidth = 2
cameraButton:setStrokeColor( 0 )

local cameraText = display.newText( "Camera", cameraButton.x, cameraButton.y, native.systemFont, 12 )
cameraText:setFillColor( 0 )

 

 

Has anyone noticed the same thing happening to them?

 

I've thinned out my sample to remove the scaling beforehand, but the problem still persists. I've also tried using:

 

display.save( photogroup, { filename="myPhoto.jpg", baseDir=system.TemporaryDirectory, isFullResolution=true } )

which did exactly the same thing.



[TOPIC: post.html]
#2

yosu

[GLOBAL: userInfoPane.html]
yosu
  • Contributor

  • 518 posts
  • Corona SDK

Had the same problem. This is how I solved it.

 

1) Instead of using 'media.show' which has been deprecated, use this : http://docs.coronalabs.com/api/library/media/selectPhoto.html

 

2) After doing all your processing, use the ':toFront()' function to  bringg your image back to the front.

 

 

 

I am using Corona 2013.2109 in v1 compatibility mode.



[TOPIC: post.html]
#3

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

Didn't work for me, I'm not using v1 compatibility mode. Using toFront() also made no difference, it's as if the image has completely disappeared.

When I run my sample code, the text on the cameraText object also changes colour in the OS X simulator when the onComplete function is called, no idea why that happens.



[TOPIC: post.html]
#4

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

Is anyone from Corona able to run my code snippet and see if they see the same error?



[TOPIC: post.html]
#5

mpappas

[GLOBAL: userInfoPane.html]
mpappas
  • Contributor

  • 527 posts
  • Enterprise

A quick observation - around line 20, you're setting the y coord of the image to 1/2 the width -- not height, which it should be I think.

 

If the image (or group) is offscreen -- nothing will show up of course...



[TOPIC: post.html]
#6

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

You're quite right, given the screen ratio though, the image should still appear on screen. I've just tried it again using build 2122, and I'm still just getting a black square instead of my image.

 

As mentioned in the code's comments this line:

display.save(photogroup, "myPhoto.jpg", baseDir)

is responsible for the problem.

 

If I comment it out then the image remains as it should be, if I put it back in then the image becomes a black square. The image in the sandbox folder is correct, so I'm not sure if it's being encoded incorrectly when it saves or something like that, which is preventing it from being reopened correctly?

 

 

Is anyone able to confirm that they see the same behaviour if they run my code?



[TOPIC: post.html]
#7

mpappas

[GLOBAL: userInfoPane.html]
mpappas
  • Contributor

  • 527 posts
  • Enterprise

ok, I just ran it on a latest gen ipod retina, and no black screen... (using build 2090, haven't updated sim in a bit)

 

After the first photo, red screen, and button are there (visible, everything looks fine).

 

After taking a second photo, I get a photo put in front of everything - but, I can still click the button and take another...

 

That's what I get with the code anyways... (Now, back to the profile issues I uncovered while building this test app...)



[TOPIC: post.html]
#8

RedBeach

[GLOBAL: userInfoPane.html]
RedBeach
  • Corona Geek

  • 1,132 posts
  • Corona SDK

Did you try run your code using another image as the source?

 

UPDATE: Never mind, I tested here and it is indeed disappearing.



[TOPIC: post.html]
#9

RedBeach

[GLOBAL: userInfoPane.html]
RedBeach
  • Corona Geek

  • 1,132 posts
  • Corona SDK

Try using using a timer before saving:

 

timer.performWithDelay(300,function() display.save(photogroup, "myPhoto.jpg", baseDir) end )


[TOPIC: post.html]
#10

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

Yep, that seems to have fixed it. I had actually tried a timer before, but perhaps I put too short a delay in?  

Set it to 200ms and all is well again. 

 

Still not sure why this is happening though?



[TOPIC: post.html]
#11

mslack

[GLOBAL: userInfoPane.html]
mslack
  • Contributor

  • 230 posts
  • Corona SDK

Thanks ... the delay was the trick ... everything was fine for me till i was testing on Android and got the dreaded black image. The delay did the trick ... hope 300 is enough on all the devices :)

 

Cheers!



[TOPIC: post.html]
#12

engel.teddy

[GLOBAL: userInfoPane.html]
engel.teddy
  • Observer

  • 19 posts
  • Corona SDK

Still having this issue with build 2014.2189 :(



[TOPIC: post.html]
#13

RedBeach

[GLOBAL: userInfoPane.html]
RedBeach
  • Corona Geek

  • 1,132 posts
  • Corona SDK

Did you try the delay?



[TOPIC: post.html]
#14

helena9

[GLOBAL: userInfoPane.html]
helena9
  • Observer

  • 11 posts
  • Corona SDK

Attached File  Bp-KIO0CcAA21Iv.jpg   1.14KB   0 downloads

I am having the same problem :(

 

Below I have my listener for both choosing and taking a picture, and the function displayPic() that it calls:

local function displayPic()	
	if picture ~= nil then
		print("pic exists")
		display.remove(picture)	
		picture = nil
	end

	if picture == nil then
		picture = display.newImage("pet.jpg",system.TemporaryDirectory) -- Display the image from the temporary directory
		print("DISPLAYING NEW PIC")
	end

	print( "photo w,h = " .. picture.width .. "," .. picture.height )
  	local wantedHeight = H/4
  	local scale = wantedHeight/picture.height
  	picture.xScale, picture.yScale = scale, scale
  	picture.x, picture.y = W/2, 3*H/4
  	addStoryGroup:insert(picture)
end

Listener:

local function onPhotoComplete( event )
	print("onPhotoComplete called")
   	if ( event.completed ) then
 
   		local imageGroup = display.newGroup()
		local image = event.target
		image.x, image.y = W/2, H/2
		
		local wantedHeight = 100
  		local scale = wantedHeight/image.height

		image.xScale, image.yScale = scale,scale
		imageGroup:insert(image)

		--display.save( imageGroup, "pet.jpg", system.TemporaryDirectory )
		local function delayFunc()
			if system.getInfo( "platformName" ) == "Mac OS X" or system.getInfo( "platformName" ) == "iPhone OS" then
				display.save(imageGroup, "pet.jpg", system.TemporaryDirectory)
			elseif system.getInfo( "platformName" ) == "Android" then
				display.save(image, "pet.jpg", system.TemporaryDirectory)
			end

			print("got here")
			displayPic()

			display.remove(imageGroup)
			imageGroup = nil
		end
		timer.performWithDelay(300, delayFunc ) --delay added to prevent black square from appearing on android

		

   end
end

The image displayed on android devices results in a black rectangle. When I insert a group into the temp directory, then it is just black, vs when I insert the image on its own it is a tiny pixel inside the black rectangle. 

 

Differing from the other posts here, I am trying to scale the image before adding it to the temp group. Before when I was adding it full resolution, it was working fine. It still works fine for iOS.

 

Thanks in advance for any advice!




[topic_controls]
[/topic_controls]