for Angular 22 · built on Fabric.js v7

Editing tools

Every editing tool, each shown with its rail isolated via the tools input. Load an image with the Image button, then try the tool. In your app you typically keep the full rail for a mode.

Crop

An interactive, non-destructive crop frame — drag the handles and reposition it (rule-of-thirds, dimmed surroundings), pick an aspect, then Apply. It sets the output region that drives export; in basic mode you position the frame to choose which part of an off-ratio image is kept.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['crop', 'rotate']" height="480px" />

Adjust & filters

Fine-tune brightness, contrast, saturation, vibrance, hue and blur, or apply filter looks (B&W, sepia, invert, sharpen, tint). Sliders preview live and commit on release.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['adjust', 'filters']" height="480px" />

Draw

Freehand pen, a genuinely translucent highlighter, and an eraser — each with color and thickness controls. The highlighter composites correctly over everything beneath it.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['pen', 'highlighter', 'eraser']" height="480px" />

Text & web fonts

Click to drop an editable text box. Choose from a curated Google-font list or search any Google font by name; bold/italic/underline, alignment, color and size are all live.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['text']" height="480px" />

Shapes

Rectangle (sharp through any corner radius up to a pill), ellipse, triangle, polygon, star, line and arrow. Stroke, fill and the corner radius reflect from the selected shape.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['shapes']" height="480px" />

Redact

Freehand redaction that bakes the composited pixels under the region — solid, blur or pixelate — concealing everything beneath, not just the base image. Click to place, then Apply.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['redact']" height="480px" />

Magic wand

Click a flat color region to erase it to transparency, with a tolerance slider. Pure flood-fill — no dependencies, works everywhere.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['magicwand']" height="480px" />

AI background tools

Remove background and Cut out subject run an ONNX model in the browser — no image data leaves the page, no API key. They lazy-load the optional @imgly/background-removal dependency and show a progress bar while the model fetches.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['removebg', 'selectsubject']" height="480px" />

Background & frames

Set a background color or gradient (it composites under transparent areas) and add a frame — none, mat, line, inset, hook or bead — with a frame color.

Loading editor…
<asp-image-editor mode="advanced" [tools]="['background', 'frame']" height="480px" />