Remove Image Background

Polotno provides built-in UI for removing image backgrounds using AI. This feature integrates with the Remove Background API and appears in the image toolbar once enabled.

import { setRemoveBackgroundEnabled } from 'polotno/config';

setRemoveBackgroundEnabled(true);

The "Remove Background" button is disabled by default for all plans. Call setRemoveBackgroundEnabled(true) during app initialization to expose it.

Pricing: Additional usage charges apply. See pricing details for rates

Disable the Feature

If you want to hide the "Remove Background" button later:

import { Toolbar } from 'polotno/toolbar/toolbar';

<Toolbar
  store={store}
  components={{
    ImageRemoveBackground: () => null,
  }}
/>

Requirements

API Key: Valid Polotno API key with Business plan (or Team plan with feature enabled)
Network Access: Internet connectivity required to call the cloud API

How It Works

Once enabled, users will see a "Remove Background" button in the image element toolbar. Clicking it:

Sends the image to Polotno's cloud API
Processes the image with AI background removal
Returns a transparent PNG
Updates the canvas element with the result

For programmatic background removal without the UI, use the Remove Background API directly:

const req = await fetch(
  'https://api.polotno.com/api/remove-image-background?KEY=YOUR_API_KEY',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ url: 'path-to-image' }),
  }
);
const res = await req.json();
// returns base64 data URL with transparent background
const newImageURL = res.url;

Image Storage: By default, the API returns a base64-encoded image which is saved directly into your design JSON. This increases JSON size significantly. It is strongly recommended to upload the processed image to your own cloud storage and store only the URL in the design JSON.

Example with cloud upload:

// after getting the base64 result
const res = await req.json();
const base64Image = res.url;

// upload to your cloud storage
const uploadedURL = await uploadToYourCloud(base64Image);

// update the element with the cloud URL instead of base64
element.set({ src: uploadedURL });

Limitations

Internet connection required
Processing time varies based on image size and complexity
Works best with clear subject separation from background

Error Handling

If the API call fails (network error, quota exceeded, invalid key), users will see an error message in the UI. Ensure your API key is valid and your subscription is active.

Security & Privacy

Data Storage: Polotno does not store processed images. All images are processed transiently and deleted immediately after processing.

Third-Party Service: Background removal uses Replicate as the processing provider. By using this feature, processed images are sent to Replicate's infrastructure.

Terms: Review Replicate's Terms of Service if you have compliance requirements about where image data is processed.

Enable the toolbar button