Tools Guide

Comprehensive guide to all 15+ editing tools available in Imigi. Each tool can be individually enabled, configured, and controlled programmatically through the editor API.

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  // Only include these tools in the toolbar
  tools: ['filter', 'finetune', 'crop', 'resize', 'draw', 'text', 'shapes']
});

Filter Tool

The Filter tool applies visual effects to the entire image. Imigi ships with a rich set of built-in filters and supports adding custom filters. Filters are non-destructive and can be removed at any time before the final export.

Built-in Filters

The following filters are available out of the box:

• Grayscale – Converts the image to shades of gray.
• Sepia – Applies a warm brownish tone reminiscent of old photographs.
• Blur – Applies a Gaussian blur to soften the image.
• Sharpen – Enhances edges and fine details.
• Vintage – A combination of warm toning, vignette, and slight desaturation.
• Invert – Inverts all color channels.
• Polaroid – Simulates a Polaroid photograph look.
• Kodachrome – Emulates the classic Kodachrome film palette.
• Technicolor – Applies a two-strip Technicolor effect.
• Brownie – Warm, brownish color grading.
• BlackWhite – High-contrast black and white conversion.
• Emboss – Creates a raised, 3D embossed look.

Configuration

Option	Type	Default	Description
tools.filter.items	string[]	All built-in filters	Array of filter names to display. Use this to limit which filters the user sees.
tools.filter.replaceDefault	boolean	false	When true, the items array completely replaces the default filters instead of appending.

API Methods

Method	Parameters	Returns	Description
tools.filter.apply(name)	name: string	void	Applies the specified filter to the image.
tools.filter.remove(name)	name: string	void	Removes the specified filter from the image.
tools.filter.getAll()	–	string[]	Returns an array of all currently applied filter names.
tools.filter.isApplied(name)	name: string	boolean	Checks whether a specific filter is currently applied.
tools.filter.addCustom(config)	config: FilterConfig	void	Registers a new custom filter that users can apply.

Example: Applying Filters Programmatically

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    filter: {
      // Only show these filters
      items: ['grayscale', 'sepia', 'vintage', 'blur', 'sharpen'],
      replaceDefault: true
    }
  }
});

// Apply a filter
editor.tools.filter.apply('sepia');

// Check if a filter is applied
if (editor.tools.filter.isApplied('sepia')) {
  console.log('Sepia is active');
}

// Remove a filter
editor.tools.filter.remove('sepia');

// List all active filters
const active = editor.tools.filter.getAll();
console.log('Active filters:', active);

Example: Adding a Custom Filter

// Register a custom "Sunset" filter
editor.tools.filter.addCustom({
  name: 'sunset',
  label: 'Sunset Glow',
  preview: '/filters/sunset-thumb.jpg',
  apply(canvas) {
    canvas.applyColorMatrix([
      1.2, 0.1, 0.0, 0, 10,
      0.0, 1.0, 0.1, 0, 5,
      0.0, 0.0, 0.8, 0, -10,
      0,   0,   0,   1, 0
    ]);
  }
});

Finetune Tool (Adjustments)

The Finetune tool provides granular control over the image's visual properties. Each adjustment is a numeric slider that the user can drag, or you can set programmatically. All adjustments are non-destructive and are applied in real time.

Available Adjustments

Adjustment	Range	Default	Description
brightness	-100 to 100	0	Controls overall lightness or darkness of the image.
contrast	-100 to 100	0	Increases or decreases the difference between light and dark areas.
saturation	-100 to 100	0	Controls color intensity. -100 produces grayscale.
exposure	-100 to 100	0	Simulates camera exposure compensation.
hue	-180 to 180	0	Rotates all colors around the color wheel by the specified degrees.
vibrance	-100 to 100	0	Boosts muted colors without oversaturating already vivid ones.
temperature	-100 to 100	0	Shifts the color temperature. Positive values are warmer (yellow), negative values are cooler (blue).

Configuration

Option	Type	Default	Description
tools.finetune.defaults	object	{}	An object mapping adjustment names to their initial values, e.g. { brightness: 10, contrast: 5 }.

API Methods

Method	Parameters	Returns	Description
tools.finetune.set(name, value)	name: string, value: number	void	Sets a specific adjustment to the given value.
tools.finetune.get(name)	name: string	number	Returns the current value of the specified adjustment.
tools.finetune.reset(name?)	name?: string	void	Resets the specified adjustment (or all adjustments if no name is given) to their default values.
tools.finetune.getAll()	–	object	Returns an object with all current adjustment values.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    finetune: {
      // Start with slightly boosted brightness and contrast
      defaults: {
        brightness: 10,
        contrast: 15,
        saturation: 5
      }
    }
  }
});

// Adjust brightness programmatically
editor.tools.finetune.set('brightness', 25);
editor.tools.finetune.set('temperature', -20);

// Read current values
const brightness = editor.tools.finetune.get('brightness'); // 25
const allValues = editor.tools.finetune.getAll();
console.log(allValues);
// { brightness: 25, contrast: 15, saturation: 5, exposure: 0, hue: 0, vibrance: 0, temperature: -20 }

// Reset only brightness
editor.tools.finetune.reset('brightness');

// Reset all adjustments
editor.tools.finetune.reset();

Crop Tool

The Crop tool allows users to select a rectangular region of the image to keep, discarding everything outside the selection. Imigi provides several preset aspect ratios and supports fully custom ratios and freeform cropping.

Preset Ratios

• Free – No ratio constraint; drag freely.
• 1:1 – Perfect square (profile photos, thumbnails).
• 4:3 – Standard display (presentations, older monitors).
• 3:2 – Classic 35mm film ratio.
• 16:9 – Widescreen (video thumbnails, banners).
• 9:16 – Vertical video (stories, reels).
• 2:3 – Portrait orientation.
• 21:9 – Ultra-wide cinematic.

Configuration

Option	Type	Default	Description
tools.crop.defaultRatio	string | null	null (free)	The initial crop ratio when the tool opens. Set to '1:1', '16:9', etc.
tools.crop.allowCustomRatio	boolean	true	Whether the user can enter a custom width:height ratio.
tools.crop.presets	string[]	All built-in ratios	Array of ratio strings to show. E.g. ['1:1', '16:9', 'free'].
tools.crop.cropzone	object	null	Initial cropzone coordinates: { x, y, width, height } in pixels.

API Methods

Method	Parameters	Returns	Description
tools.crop.apply()	–	void	Applies the current crop selection and removes the cropped-out area.
tools.crop.drawZone(config)	{ x, y, width, height }	void	Programmatically draws a crop zone at the specified coordinates.
tools.crop.resetCropzone()	–	void	Resets the crop zone back to the full image area.
tools.crop.setRatio(ratio)	ratio: string	void	Sets the crop zone to a specific aspect ratio (e.g. '16:9').

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    crop: {
      defaultRatio: '16:9',
      allowCustomRatio: false,
      presets: ['1:1', '4:3', '16:9', 'free']
    }
  }
});

// Draw a crop zone programmatically
editor.tools.crop.drawZone({
  x: 50,
  y: 50,
  width: 400,
  height: 300
});

// Apply the crop
editor.tools.crop.apply();

// Or reset to start over
editor.tools.crop.resetCropzone();

Resize Tool

The Resize tool changes the overall dimensions of the image. It supports constrained resizing (maintaining the original aspect ratio) and unconstrained resizing. You can set minimum and maximum constraints to prevent users from producing images that are too large or too small.

Configuration

Option	Type	Default	Description
tools.resize.minWidth	number	1	Minimum allowed width in pixels.
tools.resize.maxWidth	number	10000	Maximum allowed width in pixels.
tools.resize.minHeight	number	1	Minimum allowed height in pixels.
tools.resize.maxHeight	number	10000	Maximum allowed height in pixels.
tools.resize.lockAspectRatio	boolean	true	Whether the aspect ratio is locked by default.

API Methods

Method	Parameters	Returns	Description
tools.resize.resize(w, h)	w: number, h: number	void	Resizes the image to the specified width and height.
tools.resize.getSize()	–	{ width, height }	Returns the current image dimensions.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    resize: {
      minWidth: 100,
      maxWidth: 2000,
      minHeight: 100,
      maxHeight: 2000,
      lockAspectRatio: true
    }
  }
});

// Get the current size
const size = editor.tools.resize.getSize();
console.log(`Current size: ${size.width}x${size.height}`);

// Resize to 800x600
editor.tools.resize.resize(800, 600);

Draw Tool

The Draw tool enables freehand drawing directly on the canvas. Users can select from multiple brush types, sizes, and colors. Each drawn stroke is added as a separate canvas object that can be individually selected, moved, resized, or deleted.

Brush Types

• Pencil – Standard smooth freehand line.
• Marker – Semi-transparent marker effect.
• Highlighter – Wide, translucent stroke for highlighting.
• Spray – Spray paint / airbrush effect with particle dispersion.
• Neon – Glowing neon line effect.
• Crayon – Textured crayon-like stroke.

Configuration

Option	Type	Default	Description
tools.draw.brushSizes	number[]	[2, 5, 10, 20, 40]	Array of brush size options (in pixels) presented to the user.
tools.draw.brushTypes	string[]	All built-in types	Array of brush type names to display.
tools.draw.replaceDefaultBrushSizes	boolean	false	When true, brushSizes replaces defaults instead of appending.
tools.draw.replaceDefaultBrushTypes	boolean	false	When true, brushTypes replaces defaults instead of appending.
tools.draw.defaultColor	string	'#000000'	Default brush color.
tools.draw.defaultSize	number	5	Default brush size in pixels.
tools.draw.defaultType	string	'pencil'	Default brush type.

API Methods

Method	Parameters	Returns	Description
tools.draw.enable()	–	void	Activates drawing mode on the canvas.
tools.draw.disable()	–	void	Deactivates drawing mode.
tools.draw.setBrushType(type)	type: string	void	Sets the active brush type.
tools.draw.setBrushSize(size)	size: number	void	Sets the active brush size in pixels.
tools.draw.setBrushColor(color)	color: string	void	Sets the active brush color (hex, rgb, or named color).
tools.draw.getBrushType()	–	string	Returns the current brush type name.
tools.draw.getBrushSize()	–	number	Returns the current brush size.
tools.draw.getBrushColor()	–	string	Returns the current brush color.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    draw: {
      brushSizes: [1, 3, 8, 15, 30],
      brushTypes: ['pencil', 'marker', 'highlighter'],
      replaceDefaultBrushTypes: true,
      defaultColor: '#ff0000',
      defaultSize: 3,
      defaultType: 'pencil'
    }
  }
});

// Enable drawing mode
editor.tools.draw.enable();

// Switch to marker with blue color
editor.tools.draw.setBrushType('marker');
editor.tools.draw.setBrushColor('#3498db');
editor.tools.draw.setBrushSize(15);

// Read current brush settings
console.log(editor.tools.draw.getBrushType());  // 'marker'
console.log(editor.tools.draw.getBrushColor()); // '#3498db'
console.log(editor.tools.draw.getBrushSize());  // 15

// Disable drawing mode when done
editor.tools.draw.disable();

Text Tool

The Text tool lets users add fully editable text to the canvas. Each text element supports full typographic control including font family, size, color, weight, style, decoration, and alignment. Text objects can be repositioned, resized, and rotated on the canvas.

Typography Options

• Font Family – Choose from built-in fonts or supply custom web fonts.
• Font Size – Adjustable via slider or direct input.
• Color – Full color picker with hex, RGB, and HSL support.
• Bold / Italic / Underline – Standard text formatting toggles.
• Text Alignment – Left, center, right, or justify.
• Line Height – Adjustable spacing between lines.
• Letter Spacing – Adjustable spacing between characters.
• Background Color – Optional background behind the text.
• Stroke – Text outline color and width.

Configuration

Option	Type	Default	Description
tools.text.defaultText	string	'Your text here'	The placeholder text when a new text element is added.
tools.text.items	object[]	Built-in fonts	Array of font objects: { fontFamily, url? }. Use url for custom web fonts.
tools.text.controlsPadding	number	10	Padding in pixels around the text bounding box controls.
tools.text.defaultFontSize	number	24	Default font size for new text elements.
tools.text.defaultColor	string	'#000000'	Default text color.

API Methods

Method	Parameters	Returns	Description
tools.text.add(options?)	options?: TextOptions	FabricObject	Adds a new text element to the canvas. Returns the created Fabric.js object.
tools.text.selectOrAddText()	–	FabricObject	If a text object is already selected, enters edit mode on it. Otherwise, adds a new text element.

Example: Adding Custom Fonts

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    text: {
      defaultText: 'Type something...',
      defaultFontSize: 32,
      defaultColor: '#ffffff',
      items: [
        { fontFamily: 'Arial' },
        { fontFamily: 'Georgia' },
        { fontFamily: 'Courier New' },
        // Custom Google Fonts
        {
          fontFamily: 'Lobster',
          url: 'https://fonts.googleapis.com/css2?family=Lobster'
        },
        {
          fontFamily: 'Pacifico',
          url: 'https://fonts.googleapis.com/css2?family=Pacifico'
        },
        // Custom self-hosted font
        {
          fontFamily: 'BrandFont',
          url: '/fonts/brand-font.woff2'
        }
      ]
    }
  }
});

// Add text programmatically
editor.tools.text.add({
  text: 'Hello World!',
  fontFamily: 'Lobster',
  fontSize: 48,
  fill: '#e74c3c',
  fontWeight: 'bold',
  textAlign: 'center',
  left: 200,
  top: 100
});

// Add another text element and enter edit mode immediately
editor.tools.text.selectOrAddText();

Shapes Tool

The Shapes tool adds geometric shapes to the canvas. Each shape is a fully interactive Fabric.js object that can be moved, resized, rotated, and styled (fill color, stroke color, stroke width, opacity).

Built-in Shapes

• Rectangle – Standard rectangle or square.
• Circle – Perfect circle or ellipse.
• Triangle – Equilateral or isosceles triangle.
• Line – Straight line with adjustable thickness.
• Polygon – Regular polygon with configurable number of sides.
• Arrow – Directional arrow with customizable head.
• Star – Star shape with configurable number of points.

Configuration

Option	Type	Default	Description
tools.shapes.items	string[]	All built-in shapes	Array of shape names to display. E.g. ['rectangle', 'circle', 'arrow'].
tools.shapes.replaceDefault	boolean	false	When true, items replaces the default set instead of appending.
tools.shapes.defaultFill	string	'transparent'	Default fill color for new shapes.
tools.shapes.defaultStroke	string	'#000000'	Default stroke (border) color.
tools.shapes.defaultStrokeWidth	number	2	Default stroke width in pixels.

API Methods

Method	Parameters	Returns	Description
tools.shape.add(type, options?)	type: string, options?: ShapeOptions	FabricObject	Adds a shape of the specified type to the canvas. Returns the Fabric.js object.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    shapes: {
      items: ['rectangle', 'circle', 'triangle', 'arrow', 'star'],
      replaceDefault: true,
      defaultFill: 'rgba(52, 152, 219, 0.3)',
      defaultStroke: '#2980b9',
      defaultStrokeWidth: 3
    }
  }
});

// Add a red circle
editor.tools.shape.add('circle', {
  radius: 50,
  fill: 'rgba(231, 76, 60, 0.5)',
  stroke: '#c0392b',
  strokeWidth: 2,
  left: 150,
  top: 150
});

// Add a directional arrow
editor.tools.shape.add('arrow', {
  stroke: '#e67e22',
  strokeWidth: 4,
  left: 100,
  top: 200,
  width: 200,
  height: 0
});

// Add a 5-pointed star
editor.tools.shape.add('star', {
  points: 5,
  fill: '#f1c40f',
  stroke: '#f39c12',
  left: 300,
  top: 100
});

Stickers Tool

The Stickers tool lets users add image overlays from organized categories. Stickers are PNG or SVG images that are placed on the canvas as interactive objects. Imigi supports custom sticker packs organized into named categories with thumbnails.

Configuration

Option	Type	Default	Description
tools.stickers.items	StickerCategory[]	[]	Array of sticker category objects. Each category has a name, icon, and items array of sticker URLs.
tools.stickers.replaceDefault	boolean	false	When true, items replaces the built-in sticker set.

API Methods

Method	Parameters	Returns	Description
tools.stickers.add(url)	url: string	FabricObject	Adds a sticker image from the given URL to the canvas.
tools.stickers.getCategories()	–	StickerCategory[]	Returns all available sticker categories.

Example: Custom Sticker Categories

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    stickers: {
      replaceDefault: true,
      items: [
        {
          name: 'Emojis',
          icon: '/stickers/emoji-icon.png',
          items: [
            '/stickers/emojis/smile.png',
            '/stickers/emojis/heart.png',
            '/stickers/emojis/thumbsup.png',
            '/stickers/emojis/star.png',
            '/stickers/emojis/fire.png'
          ]
        },
        {
          name: 'Badges',
          icon: '/stickers/badge-icon.png',
          items: [
            '/stickers/badges/verified.svg',
            '/stickers/badges/premium.svg',
            '/stickers/badges/new.svg'
          ]
        },
        {
          name: 'Brand Assets',
          icon: '/stickers/brand-icon.png',
          items: [
            '/stickers/brand/logo-dark.png',
            '/stickers/brand/logo-light.png',
            '/stickers/brand/watermark.png'
          ]
        }
      ]
    }
  }
});

// Add a sticker programmatically
editor.tools.stickers.add('/stickers/brand/watermark.png');

Frame Tool

The Frame tool applies decorative borders and frames around the image. Frames can be simple solid borders, gradient borders, or complex image-based frames (such as Polaroid, filmstrip, or ornamental designs). Each frame is rendered as an overlay that wraps the image content.

Configuration

Option	Type	Default	Description
tools.frame.items	FrameConfig[]	Built-in frames	Array of frame config objects: { name, label, preview, borderWidth?, borderColor?, imageUrl? }.
tools.frame.replaceDefault	boolean	false	When true, items replaces the default frames instead of appending.

API Methods

Method	Parameters	Returns	Description
tools.frame.apply(name)	name: string	void	Applies the specified frame to the image.
tools.frame.remove()	–	void	Removes the currently applied frame.
tools.frame.getApplied()	–	string | null	Returns the name of the currently applied frame, or null.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    frame: {
      items: [
        {
          name: 'simple-white',
          label: 'White Border',
          preview: '/frames/white-thumb.jpg',
          borderWidth: 20,
          borderColor: '#ffffff'
        },
        {
          name: 'polaroid',
          label: 'Polaroid',
          preview: '/frames/polaroid-thumb.jpg',
          imageUrl: '/frames/polaroid-overlay.png'
        },
        {
          name: 'ornamental',
          label: 'Ornamental Gold',
          preview: '/frames/gold-thumb.jpg',
          imageUrl: '/frames/gold-overlay.png'
        }
      ]
    }
  }
});

// Apply a frame
editor.tools.frame.apply('polaroid');

// Check which frame is applied
console.log(editor.tools.frame.getApplied()); // 'polaroid'

// Remove the frame
editor.tools.frame.remove();

Fill Tool

The Fill tool sets the canvas background. It supports three modes: solid color, image fill, and gradient. The fill appears behind all other canvas objects and the original image. This is particularly useful when the canvas has been expanded beyond the original image boundaries or for creating backgrounds for collage-style compositions.

Fill Modes

• Color – A solid background color.
• Image – A background image that can be tiled, stretched, or fit to cover.
• Gradient – A linear or radial gradient with configurable color stops.

Configuration

Option	Type	Default	Description
tools.fill.defaultMode	string	'color'	The initial fill mode: 'color', 'image', or 'gradient'.
tools.fill.defaultColor	string	'#ffffff'	Default solid color fill.
tools.fill.defaultImageUrl	string	null	Default background image URL.
tools.fill.defaultGradient	object	null	Default gradient: { type: 'linear'|'radial', angle: number, stops: [{offset, color}] }.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    fill: {
      // Start with a gradient background
      defaultMode: 'gradient',
      defaultGradient: {
        type: 'linear',
        angle: 135,
        stops: [
          { offset: 0, color: '#667eea' },
          { offset: 1, color: '#764ba2' }
        ]
      }
    }
  }
});

Redact Tool

The Redact tool allows users to censor or obscure areas of the image. This is commonly used for hiding sensitive information such as faces, license plates, personal data, or private content. Imigi supports three redaction modes, each applied as a drawn rectangular or elliptical region.

Redaction Modes

• Blur – Applies a Gaussian blur to the selected region, making content unreadable while preserving the general shape.
• Pixelate – Reduces the resolution of the selected region to large mosaic blocks.
• Solid – Covers the region with a solid color (default: black).

Configuration

Option	Type	Default	Description
tools.redact.defaultMode	string	'blur'	The default redaction mode: 'blur', 'pixelate', or 'solid'.
tools.redact.defaultShape	string	'rectangle'	The shape of the redaction area: 'rectangle' or 'ellipse'.
tools.redact.blurAmount	number	10	Blur intensity (1-50). Higher values produce a stronger blur.
tools.redact.pixelateAmount	number	10	Pixelation block size (1-50). Higher values produce larger mosaic blocks.
tools.redact.solidColor	string	'#000000'	The fill color used in 'solid' mode.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'document.jpg',
  tools: {
    redact: {
      defaultMode: 'pixelate',
      defaultShape: 'rectangle',
      pixelateAmount: 15,
      blurAmount: 20,
      solidColor: '#000000'
    }
  }
});

Decorate Tool (Assets)

The Decorate tool enables users to upload and add external image assets to the canvas. Unlike stickers (which are pre-configured), the Decorate tool allows direct file upload from the user's device. Uploaded images become interactive canvas objects that can be repositioned, resized, rotated, and layered. Preset assets can also be provided for quick access.

Configuration

Option	Type	Default	Description
tools.decorate.maxUploadSizeBytes	number	10485760 (10 MB)	Maximum file size in bytes for uploaded images.
tools.decorate.allowedExtensions	string[]	['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif']	Allowed file extensions for upload.
tools.decorate.enableUpload	boolean	true	Whether to show the file upload button.
tools.decorate.enableDragDrop	boolean	true	Whether to accept drag-and-drop file uploads.
tools.decorate.presets	AssetPreset[]	[]	Array of preset asset objects: { label, url, thumbnail? }.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    decorate: {
      maxUploadSizeBytes: 5242880, // 5 MB
      allowedExtensions: ['png', 'svg', 'webp'],
      enableUpload: true,
      enableDragDrop: true,
      presets: [
        {
          label: 'Company Logo',
          url: '/assets/company-logo.png',
          thumbnail: '/assets/company-logo-thumb.png'
        },
        {
          label: 'Watermark',
          url: '/assets/watermark.png',
          thumbnail: '/assets/watermark-thumb.png'
        },
        {
          label: 'Signature',
          url: '/assets/signature.svg'
        }
      ]
    }
  }
});

Corners Tool

The Corners tool applies rounded corners to the entire image. This is a simple but effective tool for softening the appearance of the final output, commonly used for avatar images, card designs, and thumbnail generation. The corner radius is adjustable via a slider.

Configuration

Option	Type	Default	Description
tools.corners.defaultRadius	number	0	Initial corner radius in pixels.
tools.corners.maxRadius	number	200	Maximum corner radius allowed.

API Methods

Method	Parameters	Returns	Description
tools.corners.setRadius(r)	r: number	void	Sets the corner radius in pixels.
tools.corners.getRadius()	–	number	Returns the current corner radius.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'avatar.jpg',
  tools: {
    corners: {
      defaultRadius: 20,
      maxRadius: 150
    }
  }
});

// Set rounded corners programmatically
editor.tools.corners.setRadius(50);

// Make a fully circular crop (set radius to half the shortest dimension)
const size = editor.tools.resize.getSize();
const circleRadius = Math.min(size.width, size.height) / 2;
editor.tools.corners.setRadius(circleRadius);

AI Tool

The AI tool integrates AI-powered image processing features via the Replicate API. This enables advanced capabilities such as background removal, image upscaling, style transfer, object removal, and generative fill. AI features require an API token and process images through an external service.

Supported AI Features

• Background Removal – Automatically detect and remove the image background.
• Image Upscaling – Increase image resolution using AI super-resolution models.
• Style Transfer – Apply artistic styles from reference images.
• Object Removal – Select and remove unwanted objects with inpainting.
• Generative Fill – Fill selected areas with AI-generated content based on a text prompt.

Configuration

Option	Type	Default	Description
ai.replicateApiToken	string	null	Your Replicate API token. Required to enable AI features.
ai.proxyUrl	string	null	Optional proxy URL to route API calls through your backend (recommended for production to avoid exposing your API token).
ai.features	string[]	All features	Array of AI feature names to enable.
ai.maxProcessingTime	number	60000	Maximum time in ms to wait for AI processing before timing out.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  ai: {
    // Use a proxy in production to keep your token secure
    proxyUrl: 'https://your-api.example.com/replicate-proxy',
    features: ['background-removal', 'upscale', 'object-removal'],
    maxProcessingTime: 90000
  }
});

// For development/testing only (do NOT expose tokens in production)
const devEditor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  ai: {
    replicateApiToken: 'r8_your_dev_token_here'
  }
});

Zoom Tool

The Zoom tool controls the canvas viewport zoom level. Users can zoom in to inspect fine details, zoom out to see the full image, or fit the image to the screen. Zoom is non-destructive and does not affect the exported image resolution.

Configuration

Option	Type	Default	Description
tools.zoom.allowUserZoom	boolean	true	Whether the user can zoom via scroll wheel or pinch gesture.
tools.zoom.fitImageToScreen	boolean	true	Whether the image is automatically scaled to fit the editor viewport on load.
tools.zoom.zoomMode	string	'scroll'	Zoom input mode: 'scroll' (mouse wheel), 'pinch' (touch), or 'both'.
tools.zoom.minLevel	number	0.1	Minimum zoom level (0.1 = 10%).
tools.zoom.maxLevel	number	10	Maximum zoom level (10 = 1000%).
tools.zoom.step	number	0.1	Zoom increment per scroll tick or button press.

API Methods

Method	Parameters	Returns	Description
tools.zoom.zoom(level)	level: number	void	Sets the zoom level (1 = 100%, 2 = 200%, etc.).
tools.zoom.fitToScreen()	–	void	Fits the entire image within the visible viewport.
tools.zoom.getLevel()	–	number	Returns the current zoom level as a number.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  tools: {
    zoom: {
      allowUserZoom: true,
      fitImageToScreen: true,
      zoomMode: 'both',
      minLevel: 0.25,
      maxLevel: 5,
      step: 0.25
    }
  }
});

// Zoom to 200%
editor.tools.zoom.zoom(2);

// Get current zoom level
const level = editor.tools.zoom.getLevel();
console.log(`Current zoom: ${level * 100}%`); // "Current zoom: 200%"

// Fit to screen
editor.tools.zoom.fitToScreen();

History (Undo/Redo)

Imigi includes a built-in undo/redo system that tracks every modification to the canvas. Each change (applying a filter, adding a shape, cropping, drawing a stroke, etc.) is recorded as a history entry. Users can step backward and forward through the history using toolbar buttons or keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z).

How It Works

• Every canvas modification creates a new history snapshot.
• Undo restores the canvas to the previous snapshot.
• Redo re-applies a previously undone snapshot.
• Performing a new action after an undo clears all future (redo) snapshots from that point.
• The history stack size is limited to prevent excessive memory usage.

Configuration

Option	Type	Default	Description
history.maxSteps	number	50	Maximum number of history entries to keep. Older entries are discarded when the limit is reached.
history.enabled	boolean	true	Whether undo/redo tracking is enabled.

API Methods

Method	Parameters	Returns	Description
history.undo()	–	void	Undoes the last action, restoring the previous state.
history.redo()	–	void	Redoes the last undone action.
history.getHistory()	–	HistoryEntry[]	Returns the full history stack as an array of entries.
history.canUndo()	–	boolean	Returns true if there is an action that can be undone.
history.canRedo()	–	boolean	Returns true if there is an action that can be redone.
history.clear()	–	void	Clears all history entries. The current state becomes the only entry.

Example

const editor = await Imigi.init({
  selector: '#editor',
  image: 'photo.jpg',
  history: {
    maxSteps: 100
  }
});

// Make some changes
editor.tools.filter.apply('sepia');
editor.tools.finetune.set('brightness', 20);

// Undo the brightness change
editor.history.undo();

// Redo it
editor.history.redo();

// Check undo/redo availability (useful for disabling buttons)
const undoBtn = document.getElementById('undo-btn');
const redoBtn = document.getElementById('redo-btn');
undoBtn.disabled = !editor.history.canUndo();
redoBtn.disabled = !editor.history.canRedo();

// Inspect the history stack
const entries = editor.history.getHistory();
console.log(`${entries.length} history entries`);

// Clear all history
editor.history.clear();