display.save and mask

[Satheesh]

I have a display group, which is partially masked. 

Now i need to save the visible part of the display group to a file. 
So I a using display.save 

Thr problem is, the masked part while not being saved as such, appears as a black strip. 

Say my Image and my mask are as follows (both 320 x 480).

Now, on applying the mask my image looks like this on screen.

 

Now on using display.save I expect the final saved image to look something like this.

But what I get is this: - the full 320 x 480 image. 

What to do? 

display.capturebounds might have been an option, but my mask file is not always a rectangle. 
Also display.captureBounds only returns the display object, which I have to save using display.save again, which is too much processes on the screen making the UI ugly.

Is this a bug?
Any workarounds/suggestions?
 

[mpappas]

Had a lot of trouble with capture and save as well.

I believe if you insert the image into a group, and apply the mask to the group, the black masked area is removed from the final capture, giving you a final capture thats about the size / shape you expected.

If I recall correctly, it doesn’t just strip off the masked area - I think it stripped off all of the transparent area (the masked off area, and any transparency in the image itself is cropped from the final capture).

[Satheesh]

“I believe if you insert the image into a group, and apply the mask to the group, the black masked area is removed from the final capture, giving you a final capture thats about the size / shape you expected.”

I did not completely get you…  Thats more or less what I’m doing now.

Or are you talking about the order?Are you saying I should not add anything more to the group. after I apply mask to the group, hence image should be inserted before? 

[mpappas]

Sorry, I misunderstood your initial question (just before the first picture, you said “image” and mask, instead of “group” and mask)…

So, I’m guessing it works the opposite of what I recalled… To test – If you apply the mask directly to the image (not while it is in the group), and display.save that (the image itself, not the group), does it crop as you expected?

To perform the entire process that way (using a group of objects as your start point, but saving from 1 final masked image), you could -

• display.capture the entire group (based on an area / bounds, no mask)

• apply the mask to the capture

• display.save the capture (with mask, since masks behave better applied directly to images)

[Satheesh]

Ooops… Yeah my bad.  I thought the object being either an image or a group wouldn’t matter.

I guess will have to do some trial and error, hoping something would work.
Long night ahead

Thanks anyway for the suggestion. Will try it out too.
Will post the results here when I am done.

[mpappas]

Yeah, I’m pretty sure the masking (what happens to the masked/transparent areas) works a little differently when applied to groups as opposed to images - which is part of why it’s more difficult than anticipated to save good, composite images your app creates on the fly.

I think the group capture/save sdk code is doing something like getting the contentBounds of the group first, then capturing everything inside, masked (black) or not. However, when the sdk is saving an image, it seems to mask the image first, then capture/save the non-transparent portions only. This makes a huge difference in the captured image.

It was something pretty asymmetrical like that - so keep an open mind as you go through various tactics (and observe the results).

Something to keep in mind that you didn’t mention was transparency in the image.

In picture 1 you show the circles against a white background, and in image 4 you show them cropped against white as well.

However in image 5 you show the actual result with black. Is this area of the image transparent? If so, then the black area around the shapes is “undefined” and could show up as either black (android I bleieve) or white (iOS I think).

Just one more little thing to watch out for, tonight.

[jstrahan]

Maybe this will help
http://developer.coronalabs.com/code/useful-crop-library

[mpappas]

Had a lot of trouble with capture and save as well.

I believe if you insert the image into a group, and apply the mask to the group, the black masked area is removed from the final capture, giving you a final capture thats about the size / shape you expected.

If I recall correctly, it doesn’t just strip off the masked area - I think it stripped off all of the transparent area (the masked off area, and any transparency in the image itself is cropped from the final capture).

[Satheesh]

“I believe if you insert the image into a group, and apply the mask to the group, the black masked area is removed from the final capture, giving you a final capture thats about the size / shape you expected.”

I did not completely get you…  Thats more or less what I’m doing now.

Or are you talking about the order?Are you saying I should not add anything more to the group. after I apply mask to the group, hence image should be inserted before? 

[mpappas]

Sorry, I misunderstood your initial question (just before the first picture, you said “image” and mask, instead of “group” and mask)…

So, I’m guessing it works the opposite of what I recalled… To test – If you apply the mask directly to the image (not while it is in the group), and display.save that (the image itself, not the group), does it crop as you expected?

To perform the entire process that way (using a group of objects as your start point, but saving from 1 final masked image), you could -

• display.capture the entire group (based on an area / bounds, no mask)

• apply the mask to the capture

• display.save the capture (with mask, since masks behave better applied directly to images)

[Satheesh]

Ooops… Yeah my bad.  I thought the object being either an image or a group wouldn’t matter.

I guess will have to do some trial and error, hoping something would work.
Long night ahead

Thanks anyway for the suggestion. Will try it out too.
Will post the results here when I am done.

[mpappas]

Yeah, I’m pretty sure the masking (what happens to the masked/transparent areas) works a little differently when applied to groups as opposed to images - which is part of why it’s more difficult than anticipated to save good, composite images your app creates on the fly.

I think the group capture/save sdk code is doing something like getting the contentBounds of the group first, then capturing everything inside, masked (black) or not. However, when the sdk is saving an image, it seems to mask the image first, then capture/save the non-transparent portions only. This makes a huge difference in the captured image.

It was something pretty asymmetrical like that - so keep an open mind as you go through various tactics (and observe the results).

Something to keep in mind that you didn’t mention was transparency in the image.

In picture 1 you show the circles against a white background, and in image 4 you show them cropped against white as well.

However in image 5 you show the actual result with black. Is this area of the image transparent? If so, then the black area around the shapes is “undefined” and could show up as either black (android I bleieve) or white (iOS I think).

Just one more little thing to watch out for, tonight.

[jstrahan]

Maybe this will help
http://developer.coronalabs.com/code/useful-crop-library