Image Effects

Design on Web provides a rich set of image manipulation features including filter presets, individual filter controls, overlay textures with blend modes, and a DPI guard for print-quality enforcement.

Filter Presets

Apply Instagram-style filter presets to images with a single API call. Each preset combines multiple filter values (brightness, contrast, saturation, blur, grayscale, sepia) into a named look.

// Apply a named filter preset to an image object
engine.applyFilterPreset(imageId, 'lomo');

// Available presets:
// 'none'       — Reset all filters
// 'xpro'       — High contrast, warm saturation
// 'lomo'       — Dark contrast, saturated
// 'sepia-warm' — Warm sepia tone
// 'bw'         — Black & white with slight contrast
// 'vintage'    — Desaturated sepia
// 'cool'       — Subtle cool tones
// 'dramatic'   — Deep shadows, high contrast
// 'soft'       — Bright, low contrast, slight blur
// 'vivid'      — Punchy saturation

// Get the list of available presets programmatically
const presets = engine.getFilterPresets();
// [{ name: 'none', filters: { brightness: 0, ... } }, ...]

Filter Presets

Name	Type	Default	Description
`none`	`Reset`	—	Removes all filters, restoring the original image.
`xpro`	`Warm`	—	Bright, high contrast, high saturation. Cross-processing look.
`lomo`	`Dark`	—	Slightly dark, high contrast, saturated. Lomography style.
`sepia-warm`	`Warm`	—	Warm sepia tone with slight brightness boost.
`bw`	`Mono`	—	Grayscale with added contrast for a crisp B&W look.
`vintage`	`Retro`	—	Desaturated sepia with subtle contrast. Aged photo feel.
`cool`	`Cool`	—	Slightly boosted contrast and saturation. Clean, modern.
`dramatic`	`Dark`	—	Deep shadows, high contrast. Cinematic look.
`soft`	`Light`	—	Bright, low contrast, slight blur. Dreamy feel.
`vivid`	`Bright`	—	High saturation, slight contrast. Vibrant and punchy.

Individual Filters

For fine-grained control, apply individual filters directly. Multiple filters can be stacked on the same image. Setting a filter to its neutral value (0 for sliders, 0 for toggles) removes that specific filter.

// Apply individual filters (stacked, not exclusive)
engine.applyImageFilter(imageId, 'brightness', 0.2);  // -1 to 1
engine.applyImageFilter(imageId, 'contrast', 0.3);    // -1 to 1
engine.applyImageFilter(imageId, 'saturation', -0.5);  // -1 to 1
engine.applyImageFilter(imageId, 'blur', 0.05);        // 0 to 1
engine.applyImageFilter(imageId, 'grayscale', 1);       // 0 or 1
engine.applyImageFilter(imageId, 'sepia', 1);           // 0 or 1

// Reset a single filter by setting to neutral value
engine.applyImageFilter(imageId, 'brightness', 0);

// Reset ALL filters at once
engine.applyFilterPreset(imageId, 'none');

Available Filters

Name	Type	Default	Description
`brightness`	`-1 to 1`	—	Adjust image brightness. 0 = no change.
`contrast`	`-1 to 1`	—	Adjust image contrast. 0 = no change.
`saturation`	`-1 to 1`	—	Adjust color saturation. 0 = no change, -1 = fully desaturated.
`blur`	`0 to 1`	—	Apply gaussian blur. 0 = sharp.
`grayscale`	`0 or 1`	—	Convert to grayscale. Boolean toggle.
`sepia`	`0 or 1`	—	Apply sepia tone. Boolean toggle.

💡

Presets vs individual filters

Use applyFilterPreset() for quick one-click effects. Use applyImageFilter() when building custom filter controls (sliders, toggles) in your UI.

Overlay Textures

Overlay textures add a visual layer on top of an image — like a grunge effect, bokeh glow, or paper texture. The overlay automatically tracks the base image's position, size, and rotation.

// Add an overlay texture on top of an image
const overlayId = await engine.addOverlayTexture(imageId, '/textures/bokeh.jpg', {
  blendMode: 'overlay',  // default: 'overlay'
  opacity: 0.5,          // default: 0.5
});

// The overlay:
// - Matches the base image size, position, and rotation
// - Follows the base image when moved/scaled/rotated
// - Is non-selectable (controlled via API only)
// - IS included in exports (it's part of the design)

// Change overlay properties
engine.setOverlayOpacity(imageId, 0.3);
engine.setOverlayBlendMode(imageId, 'multiply');

// Get current overlay info
const info = engine.getOverlayForImage(imageId);
// { id: '...', blendMode: 'multiply', opacity: 0.3 }

// Replace with a different texture (removes old, adds new)
await engine.addOverlayTexture(imageId, '/textures/grunge.jpg');

// Remove overlay entirely
engine.removeOverlayTexture(imageId);

Overlay Methods

Name	Type	Default	Description
`addOverlayTexture(imageId, src, options?)`	`Promise<string \| null>`	—	Adds an overlay on top of the specified image. Returns the overlay object ID. Options: { blendMode?: string, opacity?: number }.
`removeOverlayTexture(imageId)`	`void`	—	Removes the overlay texture from the specified image.
`setOverlayBlendMode(imageId, mode)`	`void`	—	Changes the overlay blend mode (e.g., 'overlay', 'multiply', 'screen').
`setOverlayOpacity(imageId, opacity)`	`void`	—	Sets overlay opacity (0 to 1).
`getOverlayForImage(imageId)`	`object \| null`	—	Returns { id, blendMode, opacity } or null if no overlay exists.

ℹ️

Overlay behavior

Each image can have at most one overlay. Calling addOverlayTexture() again replaces the existing overlay. The overlay is non-selectable — users control it through your UI (opacity slider, blend mode dropdown, remove button). Deleting the base image automatically removes its overlay.

Blend Modes

Blend modes control how an object's colors interact with the layers below it. They work on any object type — shapes, text, images, and groups.

// Set a blend mode on ANY object (not just images)
engine.setBlendMode(objectId, 'multiply');

// Available blend modes:
// 'source-over'  — Normal (default)
// 'multiply'     — Darken by multiplying colors
// 'screen'       — Lighten by screening colors
// 'overlay'      — Combine multiply & screen
// 'darken'       — Keep darker of two colors
// 'lighten'      — Keep lighter of two colors
// 'color-dodge'  — Brighten base by blend
// 'color-burn'   — Darken base by blend
// 'hard-light'   — Strong overlay
// 'soft-light'   — Subtle overlay
// 'difference'   — Subtract colors
// 'exclusion'    — Lower-contrast difference

DPI Guard (Print Mode)

When the editor is in product/print mode, a DPI guard prevents images from being scaled beyond a quality threshold. This ensures that exported artwork meets minimum print resolution requirements.

Images are auto-scaled to the DPI limit on upload — no surprise shrink later
Interactive scaling is clamped at 150 DPI (at export resolution)
An image:dpi-warning event is emitted when the limit is reached
Auto-centered on canvas after upload

// When the editor is in product mode with an export multiplier,
// images are automatically protected from being scaled beyond
// a minimum DPI threshold.

// Set the export multiplier (done automatically by product config)
engine.setExportMultiplier(5.91);  // e.g., 600px visual → 3543px @300dpi

// When a user uploads an image:
// 1. It is auto-scaled DOWN to fit within the DPI limit
// 2. It is auto-centered on the canvas
// 3. No "surprise shrink" on first resize

// During interactive scaling, the DPI guard prevents enlarging
// beyond 150 DPI at the export resolution.
// An 'image:dpi-warning' event is emitted when the limit is hit.

engine.on('image:dpi-warning', ({ message }) => {
  showToast(message);
  // "Untuk menjaga kualitas print, gambar tidak dapat diperbesar lagi."
});