Image Filters Bubble Mobile

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-06.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Image%20Filters

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-06&plugin=1765300047151x852516668267036700_current&tab=Design&name=Image+Filters&type=page&version=live&type_id=filters&elements=bTKHR

Introduction

The Image Filters Bubble Mobile plugin provides a powerful image processing solution specifically designed for mobile applications built with Bubble’s mobile editor. This plugin allows you to apply a wide range of image filters and adjustments directly within your mobile app, including preset filters (vintage, lomo, clarity, and more) as well as manual adjustments for brightness, contrast, saturation, exposure, and other parameters.

It processes images in real-time and outputs the result as a base64 string, which can be saved to Bubble’s file manager or used directly in your application.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app for iOS or appropriate testing methods for Android.

No external API keys or accounts are required.

To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/njge8JcQ

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Plugin Element - Filters

The plugin contains a visual element called “Filters” that should be placed on your mobile page. This element handles all image processing operations.

Fields

Element States

Element Events

Element Actions

Workflow Examples

Here are some basic workflow examples to get you started with the Image Filters Bubble Mobile plugin:

Title	Description	Type
Image	URL of the source image to be processed	Image
Filter (preset)	Name of the predefined filter to apply. Available options: vintage, lomo, clarity, sincity, sin_city, sunrise, crossprocess, cross_process, orangepeel, orange_peel, love, grungy, jarques, pinhole, oldboot, old_boot, glowingsun, glowing_sun, hazydays, hazy_days, hermajesty, her_majesty, nostalgia, hemingway, concentrate, greyscale, grayscale, none	Text
Brightness	Brightness adjustment value (-100 to 100)	Number
Contrast	Contrast adjustment value (-100 to 100)	Number
Saturation	Saturation adjustment value (-100 to 100)	Number
Exposure	Exposure adjustment value (-100 to 100)	Number
Sepia	Sepia effect intensity (0 to 100)	Number
Noise	Noise effect intensity (0 to 100)	Number
Sharpen	Sharpening effect intensity (0 to 100)	Number
Hue	Hue shift value (-180 to 180)	Number
Vignette	Vignette effect intensity (0 to 100)	Number
Tilt-shift	Tilt-shift blur effect intensity (0 to 100)	Number
Invert	Invert colors of the image	Boolean
Use previews	Generate preview versions of processed images (smaller size for faster loading)	Boolean

Name	Description	Type
is ready	Indicates if the plugin is ready to process images	Boolean
is processing	Indicates if image processing is currently in progress	Boolean
processing error	Error message from image processing operations	Text
processed image base64	Base64 string of the processed full-size image	Text
processed image preview base64	Base64 string of the processed preview image (smaller version)	Text
image width	Width of the processed image in pixels	Number
image height	Height of the processed image in pixels	Number
applied filter	Name of the filter that was applied to the image	Text
file manager url	URL of the uploaded file in Bubble’s file manager	Text
error message	General error message for upload or other operations	Text
preset_names	List of available preset filter names	Text (list)

Name	Description
filter ready	Triggered when the WebView and image processing engine are loaded and ready
processing started	Triggered when image processing begins
image processed	Triggered when image processing is completed successfully
processing error	Triggered when an error occurs during image processing
on error	Triggered when an error occurs during file upload operations

Title	Description	Type
Endpoint	Upload endpoint URL (e.g., your-app.bubbleapps.io/fileupload)	Text
File Name	The name of the uploaded file (optional - auto-generated if not provided)	Text
Base64	The uploaded file in base64 format (use the “processed image base64” state)	Text