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's AI edit menu once enabled.

import { setRemoveBackgroundEnabled } from 'polotno/config';

setRemoveBackgroundEnabled(true);

The "Remove background" action 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" action later:

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

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

Use your own provider

Register a handler to remove backgrounds with your own service. It receives the image URL and returns the new image URL, and the action appears without the Polotno Cloud requirements below:

import { setRemoveBackgroundFunc } from 'polotno/config';

setRemoveBackgroundFunc(async (src, signal) => {
  return await myApi.removeBackground(src, signal);
});

setRemoveBackgroundEnabled(false) still hides the action. Pass null to restore the Polotno Cloud default.

To add Expand, Generative fill and Upscale with your own provider, see AI Image Tools.

Requirements

API Key: Valid Polotno API key with background removal enabled
Network Access: Internet connectivity required to call the cloud API

How It Works

Once enabled, users will see "Remove background" in the AI edit menu of the image 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.

On this page