# What is Masked Image?

Image masking is a technique used in photo editing. It helps to separate specific areas of an image for more precise editing and manipulation. It's like placing a “mask” over parts of a picture that you want to protect or hide while exposing the other areas for editing.

Example of "Original Image" and "Masked Image".

<div align="left" data-full-width="false"><figure><img src="https://2806262628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUQBvuff51gXfTbQ9Glvk%2Fuploads%2FLE30Ou9XH12cR7Bf3s2I%2Fdownload.png?alt=media&#x26;token=f5a6a157-9573-4818-9cdd-5c5af2af0d52" alt="" width="375"><figcaption><p>Original Image</p></figcaption></figure></div>

<div align="left"><figure><img src="https://2806262628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUQBvuff51gXfTbQ9Glvk%2Fuploads%2FxdBdmudbMJy4t1WYmoPd%2Fimage.png?alt=media&#x26;token=e97be784-5190-4e03-8dac-1109b9afb647" alt=""><figcaption><p>Image with the selected an object like Chair, Mirror, Lamp, Pillo.</p></figcaption></figure></div>

<div align="left"><figure><img src="https://2806262628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUQBvuff51gXfTbQ9Glvk%2Fuploads%2FFfbKJQaN2cOufdoqdAca%2Fmask.jpg?alt=media&#x26;token=d043c318-206e-402f-a94e-a9944d2e03ec" alt="" width="375"><figcaption><p>Masked Image</p></figcaption></figure></div>

The masked image is generated in black and white colors. The white color highlights the selected objects, areas, or specific parts of the image, while the black color represents the unselected areas.

## How to generate Masked Image?

To generate a sample mask image you can visit our website <https://homedesigns.ai/get-mask-image>

1. Upload Original Image
2. Select an area that you want to brush using brush tool or select an object that are detected by AI in the image.
3. Click on the "Download Mask Image" button.

{% embed url="<https://youtu.be/2wmHz2ze0t4>" %}
Video Toturial of How to generate Masked Image.
{% endembed %}

## Tool & Libraries

If you are utilizing an API such as Precision, Fill Spaces, Decor Staging, Furniture Removal, Color & Textures, and Paint Visualizer, you will come across a parameter named <mark style="color:red;">**`masked_image`**</mark>.&#x20;

For creating a mask image on the frontend of your website, we recommend using the following tools and libraries:

1. **Image Masking:** Here is a demonstration of Konva JS, a tool you can use to mask the image on the canvas. <https://konvajs.org/docs/sandbox/Free_Drawing.html>
2. **Color Picker:** This is a simple color picker from HTML <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color>\
   The color picker supports RGB and HEX color formats (e.g., #000000), but only RGB values like 230, 110, 101 are accepted in the platform. HEX values are not supported in this platform.\
   ![](https://2806262628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUQBvuff51gXfTbQ9Glvk%2Fuploads%2F2VXxRMzOALad5m9kMfSK%2Fimage.png?alt=media\&token=fb23f712-660f-473b-8a3f-ab1a1c71b1cd)<br>
3. **Color Upload:** The color upload is a basic PNG image containing a single color, similar to the provided example.\
   <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color>\
   ![](https://2806262628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUQBvuff51gXfTbQ9Glvk%2Fuploads%2F5sRR05pLlP7aV3wvGpaP%2Fimage.png?alt=media\&token=82dba3a1-4135-4eaa-8d20-acbba8f10686)&#x20;
