Integration & API

Use the editor as a modal, drive it headlessly, listen to its events, and reference the full input/output surface.

Modal dialog

For avatar / quick-edit flows, inject AspImageEditorDialog and await a Blob (or null on cancel). Opens the basic editor as a modal.

import { inject } from '@angular/core';
import { AspImageEditorDialog } from '@ascentsparksoftware/angular-image-editor';

private readonly editor = inject(AspImageEditorDialog);

async edit(src: string): Promise<void> {
  const blob = await this.editor.open({
    src,
    heading: 'Update profile photo',
    aspectPresets: ['1:1', '4:3', 'free'],
  });
  if (blob) { /* user saved — upload blob */ }
}

Headless engine

The Fabric-backed EditorEngine and the pure helpers are exported for headless or advanced use — scene save/load, layers, guides, artboard, and the AI/magic operations directly.

Also exported: resolveTools, resolveFilters, deriveTheme, applyTheme, EditHistory and DeltaHistory.

import { EditorEngine, deriveTheme } from '@ascentsparksoftware/angular-image-editor';

// derive the full --asp-* token map from three inputs
const tokens = deriveTheme('#f4f6f9', '#1f6feb', 'light');

Events

Outputs you can bind on the component.

Output	Payload	Fires
`saved`	`Blob`	Export / Save
`canceled`	`void`	Basic-mode Cancel
`imageLoaded`	`void`	An image finished loading
`exported`	`Blob`	Export download produced a Blob
`errorOccurred`	`AspEditorError`	Recoverable load/export/init error

API reference

The AspImageEditor component inputs.

Input	Type	Default
`src`	`string \| Blob \| null`	`null`
`mode`	`AspMode`	`'advanced'`
`width` / `height`	`AspSize \| null`	`null`
`tools`	`AspTool[] \| null`	`null`
`disabledTools`	`AspTool[]`	`[]`
`filters`	`AspFilter[] \| 'all' \| null`	`null`
`aspectPresets`	`AspAspectPreset[]`	`['free','1:1','4:3','16:9']`
`aspectRatios`	`AspAspectOption[]`	`[]`
`exportFormats`	`AspExportFormat[]`	`['png','jpeg','webp']`
`exportQuality`	`number`	`90`
`heading`	`string`	`'Edit image'`
`showHistory`	`boolean`	`true`
`keyboardEnabled`	`boolean`	`true`
`fonts`	`FontOption[]`	`DEFAULT_FONTS`
`baseColor`	`string`	`'#f4f6f9'`
`accentColor`	`string`	`'#1f6feb'`
`themeMode`	`'light' \| 'dark'`	`'light'`

Accessibility

WCAG AA color contrast (derivation-guaranteed), keyboard-operable controls, :focus-visible rings, prefers-reduced-motion honored, and Trusted-Types-safe icon rendering.

Security

The editor renders consumer-supplied images and SVGs onto a canvas; SVGs are rasterized through a sandboxed <img>, so scripts inside an SVG do not execute. Validate uploads at your boundary; the optional AI model is fetched at runtime but no image data leaves the browser.

Full policy and private reporting: SECURITY.md.