Step 1: Install or Add the Plugin Open your app on Bubble.io.

Go to the Plugins tab.

Install Polygon Image Masker from the marketplace or develop your own using the Plugin Editor.

Step 2: Define the Plugin Element
In the Plugin Editor, go to the Elements tab and do the following:

Create an Element
Name: PolygonMasker (or similar)

Category: Visual

Icon: (optional)

Add Fields:
originalImage – (Type: Image)
→ The image to be clipped

clickX – (Type: List of Numbers)
→ The X-coordinates of the polygon

clickY – (Type: List of Numbers)
→ The Y-coordinates of the polygon

Add Exposed States:
clipped_image – (Type: Image)
→ Outputs the resulting clipped PNG image URL

Add Triggered Event:
image_uploaded – Fired after upload is complete

Step 3: Add the Action(s)
Go to the Actions tab and create two client-side actions:

Action 1: "Clip Image with Polygon"
Purpose: Keeps only the area inside the polygon

Action 2: "Cut Out Polygon From Image"
Purpose: Removes the polygon area, leaving a transparent hole

Step 4: Use in Your App
Add the PolygonMasker element to your page.

Set the originalImage, clickX, and clickY values using dynamic data or custom states.

In your workflow:

Add an action → Plugins → "Clip Image with Polygon" or "Cut Out Polygon From Image"

After processing, use PolygonMasker’s clipped_image to display or store the result.

Use the “image_uploaded” event to trigger follow-up actions (like saving to a database or updating a UI element).