- Home /
Getting the overlapping pixels between a UI mask and a UI image
Hello! I'm making a system where the user imports an image from their hard drive and then masks it with a white circle image (completly transparent on the outer sections of the circle) and then saves the resulting masked image.
However, the only problem i have right now is that i can't find a way to get the overlapping pixels between a UI mask and a UI image. What i need is to get the pixels from the UI image that overlap only the white circle portion of the UI Mask image, and with that, create a new texture.
This is how my UI setup looks like.
"Mask", well, is the mask image, and "TargetImage" is the image that's being masked and you can see inside the circle fully opaque. I need to get the pixels from "TargetImage" that are overlapping the mask image's circle and then create a new texture the same resolution as the mask's texture of the masked "TargetImage".
Any help on this is certainly appreciated!
Hey there, I'm not sure if I fully understand what you're wanting - but to me it sounds like you have a mask image which you want to use and cut out only what is relevant from the user image?
Here is some code that may help - you would need to correctly set up your mask image prior with alpha however this should do the job... Let me know how you go!
Texture2D userImage;
Texture2D mask;
// check image size, resize if required
if (userImage.width != mask.width || userImage.height != mask.height)
{
userImage.Resize(mask.width, mask.height);
}
// Set alpha from mask into userImage
for(int i = 0; i < userImage.width * userImage.height; i++)
{
int y = i / mask.width;
int x = i - (y*mask.width);
Color col = userImage.GetPixel(x, y);
col.a = (mask.GetPixel(x, y)).a;
userImage.SetPixel(x, y, col);
}
Thanks for replying! I'm sorry if i didn't explain myself well enough. What i want is to get the masked portion of "TargetImage". Right now i'm using Texture2D.ReadPixels() to take a screenshot of the "TargetImage"'s portion i want and then i apply the alpha from the $$anonymous$$ask's texture. This works nicely with fully opaque target images, but i also want to be able to get the masked portion of images with transparency, and save them as .png files.
For this, i found out that if i could get which pixels of "TargetImage" are overlapping "$$anonymous$$ask" 's texture then i could apply them into a new Texture2D and save it.
Your script would grab the target texture and resize to the $$anonymous$$ask's texture size. What i need is to get the masked portion of the target texture, since the users will be able to move and resize the "TargetImage" to mask any portion of their image that they want.
Thanks for the help! Any more help is also appreciated!
Have you try using a camera with transparent color as clear flag, and render it to a render texture? i guess it should keep the transparency of the ui elements.
RenderTexture.active = renderTexture;
texture2D.ReadPixels (new Rect(0,0, renderTexture.width, renderTexture.height),0,0);
texture2D.Apply ();
RenderTexture.active = null;
Ohh i didn't know you could use ReadPixels() with a Render texture to get a transparent image!! Thanks!! I ended up creating a second Camera to mask out only the UI and then make a function to disable any other unnecessary UI behind the image i want and then take the screenshot.
Thanks for the help! It would be nice if Unity included a way to get overlapping pixels between UI elements or atleast a way to get the position on Screen coordinates of a Texture's pixel using GetPixel(), though.
Your answer
Follow this Question
Related Questions
Create UI Mask from Childrens images 2 Answers
Poke hole in UI Image? 1 Answer
UI Masking (Type visiblity of the content outside and inside of mask ) 0 Answers
Get size of UI Image at runtime 3 Answers
Unity UI not showing some Images 0 Answers