# Masking an image in reports

**URL:** <https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424>\
**Category:** Ignition\
**Tags:** reporting\
**Created:** [November 25, 2025, 3:53pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424 "2025-11-25T15:53:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [November 25, 2025, 3:53pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/1 "2025-11-25T15:53:30Z")

</div>

I'm building a report and I have an image that I want to apply a circular mask to. I tried the radius and it looks like it draws underneath the image. I also tried using a circle shape component and setting the z level higher but I'm not having any luck getting the transparency to "flip", as in a transparent center with a filled border to the bounds of the box.

Has anyone tried this with any success?

---

<div class="post-metadata">

**Author:** ![Vi\_Quang](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vi_quang/32/82707_2.png) [@Vi\_Quang](https://forum.inductiveautomation.com/u/Vi_Quang)\
**Post date:** [November 25, 2025, 4:58pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/2 "2025-11-25T16:58:01Z")

</div>

Something like this?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7c95c75029c79a8be3c33955e632453662791dfd.jpeg)

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [November 25, 2025, 6:14pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/3 "2025-11-25T18:14:41Z")

</div>

I was looking for the opposite.

I did figure out a way to do it: place a rectangle give it some fill, add a circle then use the `difference` tool to subtract the circle from the rectangle and use that combined shape as a mask for the image

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f6f8df69dba3f3a2b067e88cf279046cc5e8902e.png)

edit: You've got me curious though, what's the method for your example?

---

<div class="post-metadata">

**Author:** ![Vi\_Quang](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vi_quang/32/82707_2.png) [@Vi\_Quang](https://forum.inductiveautomation.com/u/Vi_Quang)\
**Post date:** [November 25, 2025, 6:23pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/4 "2025-11-25T18:23:42Z")

</div>

1. Draw a rectangle
2. Draw an ellipse on top of it
3. Make the difference, should an ellipse out of the rectangle
4. Drop an image on the newly formed shape
5. This should result in a popup, and chose Texture.
6. Enable Fill on the shape to display the image.

---

<div class="post-metadata">

**Author:** ![Vi\_Quang](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vi_quang/32/82707_2.png) [@Vi\_Quang](https://forum.inductiveautomation.com/u/Vi_Quang)\
**Post date:** [November 25, 2025, 6:28pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/5 "2025-11-25T18:28:01Z")

</div>

I’m not sure what you’re trying to do, but if it’s just to apply a circular mask. Then you can drop an image on the ellipse itself:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c0f145738d2bbc7d75b76346fe3a89760f980457.jpeg)

The negative about this, is that it doesn’t appear that you can scale or adjust the offset of the image.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [November 25, 2025, 6:45pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/6 "2025-11-25T18:45:11Z")

</div>

We're trying to make an employee badge and make their picture into a circle instead of a rectangle.

edit: what do you mean by drop an image onto the shape?  
edit2: I figured out the dropping of an image onto the shape. It seems to only work if I drag and drop from a folder. I don't get the popup when dragging from image management.

Also, how could I use this to set the picture dynamically? The picture would be coming from the database/blob storage.

---

<div class="post-metadata">

**Author:** ![Vi\_Quang](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vi_quang/32/82707_2.png) [@Vi\_Quang](https://forum.inductiveautomation.com/u/Vi_Quang)\
**Post date:** [November 26, 2025, 7:13pm UTC](https://forum.inductiveautomation.com/t/masking-an-image-in-reports/112424/7 "2025-11-26T19:13:23Z")

</div>

> Also, how could I use this to set the picture dynamically? The picture would be coming from the database/blob storage.

I’m not sure if currently this can be done, so you have to work with the solution you came up with unfortunately. I have some leads, but short on time presently. Would be a useful feature to have regardless.
