AI Background Removal & Image Upscale

ChamevoJS provides two AI-powered image processing features: background removal and super-resolution upscaling. Both work through a server-side proxy that forwards requests to an AI processing service, keeping API keys secure.

How It Works

1. The user selects an image element on the canvas.
2. They click Remove Background or Upscale with AI in the element toolbar.
3. ChamevoJS sends the image URL to your aiService.serverURL endpoint.
4. Your server processes the request (via a third-party AI API or local processing) and returns the new image URL.
5. The canvas updates with the processed image. The change is recorded in undo/redo history.

Quick Start

1. Configure the AI Service

Enable AI features by setting aiService in your options:

const customizer = createCustomizer('#container', {
    aiService: {
        serverURL: '/php/ai-service.php',
        removeBG: true,
        superRes: true,
    },
});

2. Select a Raster Image

No per-element flag is required. The Remove Background and Upscale tools appear automatically in the element toolbar for any raster image element (JPEG/PNG) once aiService.serverURL is configured. They are hidden for vector (SVG) elements and when the relevant aiService flag (removeBG / superRes) is false.

3. Implement the Server Endpoint

See Server-Side Implementation below.

Configuration

AIServiceConfig

Set via the aiService global option:

Property	Type	Default	Description
serverURL	string | null	null	URL to your AI service endpoint. Required for all AI features.
removeBG	boolean	false	Enable background removal in the element toolbar.
superRes	boolean	false	Enable super-resolution upscaling. Also enables the upscale button in cv-dpi-alert.
text2Img	boolean	false	Enable text-to-image generation (separate module).

Server-Side Implementation

ChamevoJS sends a POST request to aiService.serverURL with a JSON body. The service field identifies which operation to perform.

Background Removal

Request

{
    "service": "removeBG",
    "image": "https://example.com/photo.jpg"
}

Field	Type	Description
service	string	Always "removeBG".
image	string	URL of the source image to process.

Response

{
    "new_image": "/uploads/2026/03/nobg_abc123.png"
}

Field	Type	Description
new_image	string	Public URL path to the processed image. Must be accessible by the browser.

Super-Resolution Upscale

Request

{
    "service": "superRes",
    "image": "https://example.com/photo.jpg",
    "scale": 2
}

Field	Type	Description
service	string	Always "superRes".
image	string	URL of the source image to upscale.
scale	number	Upscale factor (default 2).

Response

{
    "new_image": "/uploads/2026/03/upscaled_abc123.png"
}

Field	Type	Description
new_image	string	Public URL path to the upscaled image.

Error Response

On failure, return a JSON object with an error field:

{
    "error": "Background removal failed: unsupported image format."
}

PHP Example

Here's a reference implementation from the playground:

<?php
header('Content-Type: application/json');

// Parse JSON body
$payload = json_decode(file_get_contents('php://input'), true);
if (empty($payload) || !isset($payload['service'])) {
    die(json_encode(['error' => 'The payload is empty or incorrect!']));
}

$service = $payload['service'];

switch ($service) {
    case 'removeBG':
        // Forward to your AI provider (e.g. remove.bg, custom model)
        $result = $aiProvider->removeBackground($payload['image'] ?? '');

        if ($result['status'] === 'success') {
            $localPath = downloadToServer($result['output']);
            die(json_encode(['new_image' => $localPath]));
        }

        die(json_encode(['error' => $result['message'] ?? 'Background removal failed.']));

    case 'superRes':
        // Forward to your AI provider (e.g. Real-ESRGAN, custom model)
        $result = $aiProvider->upscale(
            $payload['image'] ?? '',
            intval($payload['scale'] ?? 2)
        );

        if ($result['status'] === 'success') {
            $localPath = downloadToServer($result['output']);
            die(json_encode(['new_image' => $localPath]));
        }

        die(json_encode(['error' => $result['message'] ?? 'Upscale failed.']));

    default:
        die(json_encode(['error' => 'Unknown service: ' . $service]));
}

Other Languages

The endpoint can be implemented in any language (Node.js, Python, Go, etc.) as long as it accepts a JSON POST with { service, image } and returns { "new_image": "..." }.

API Reference

chamevo.removeBackground(element)

Remove the background from an image element:

const chamevo = e.detail.chamevo;
await chamevo.removeBackground(selectedElement);

Parameter	Type	Description
element	ICVElement	The image element. Must have getType() === 'image'.

Returns a Promise<void> that resolves when the processed image has been loaded onto the canvas.

chamevo.upscaleImage(element, scale?)

Upscale an image using super-resolution:

const chamevo = e.detail.chamevo;
await chamevo.upscaleImage(selectedElement, 2);

Parameter	Type	Default	Description
element	ICVElement	—	The image element. Must have getType() === 'image'.
scale	number	2	Upscale factor.

Returns a Promise<void> that resolves when the upscaled image has been loaded onto the canvas.

Undo/Redo Support

Both methods automatically capture state before processing and record the change in the history manager. Users can undo/redo AI operations like any other canvas edit.

i18n

Customize labels via the labels option:

customizer.options = {
    labels: {
        'toolbar.remove_background': 'Remove Background',
        'toolbar.removing_background': 'Removing background...',
        'toolbar.upscaling_image': 'Upscaling image...',
        'misc.ai_remove_bg_success': 'Background Removed',
        'misc.ai_upscale_success': 'Image Upscaled',
    },
};

See i18n for full translation setup.

Next Steps

• DPI Alert — Automatic quality warnings with AI upscale integration
• Image Filters — Server-side image filter processing
• AI Try-On — Virtual try-on with AI-generated model photos