npx-image-editor-angular

Angular (16 → 19+) component and service for npx-image-editor — the zero-dependency, 100% local/offline canvas image editor. Nothing leaves the user's machine: no servers, no model downloads, no telemetry.

Features (from the core library): full built-in editor UI, filters & filter packs, crop/rotate/flip with preset ratios, freehand/arrow drawing, 10 shapes (transparent inside by default), icons & stickers, text styling, layers/groups/masks/blend modes, undo/redo with keyboard shortcuts, rulers/guides/grid, comments, measurement & calibration, curves/levels/histogram/color balance/HSL/gradient editor, local AI tools (background removal, inpainting/object removal, upscaling, auto-crop, smart selection, colorization), basic DICOM viewing with window/level, collage & templates, local real-time collaboration, and export to PNG/JPG/WebP/AVIF/SVG/PDF with watermark & batch options.

Install

npm install npx-image-editor npx-image-editor-angular

Component

import { Component, signal } from '@angular/core';
import { NpxImageEditorComponent } from 'npx-image-editor-angular';

@Component({
  selector: 'app-editor-page',
  standalone: true,
  imports: [NpxImageEditorComponent],
  template: `
    <button (click)="editor?.applyFilter('vintage')">Vintage</button>
    <button (click)="editor?.removeBackground()">Remove background</button>
    <button (click)="editor?.download('edited.png')">Export PNG</button>

    <npx-image-editor-ng
      [src]="'assets/photo.jpg'"
      [theme]="'dark'"
      [options]="{ user: 'alice' }"
      (ready)="editor = $event"
      (imageLoaded)="status.set('loaded ' + $event.width + '×' + $event.height)"
      (historyChange)="canUndo.set($event.canUndo)"
      style="height: 80vh">
    </npx-image-editor-ng>

    <p>{{ status() }}</p>
  `,
})
export class EditorPageComponent {
  editor: any = null;
  status = signal('loading…');
  canUndo = signal(false);
}

Inputs

| Input | Type | Description | |---|---|---| | src | string | Blob | HTMLImageElement | canvas | image to load (reactive) | | theme | 'light' | 'dark' | object | theme (reactive) | | options | object | any new ImageEditor(...) constructor options (menus, user, gridSize, …) |

Outputs

| Output | Fires when | |---|---| | ready | editor created (and initial src loaded) — payload is the editor instance | | editorChange | any edit happens | | imageLoaded | an image finishes loading ({width, height, name}) | | selectionChange | object selection changes | | historyChange | undo/redo state changes ({canUndo, canRedo, …}) | | filterApplied | a filter runs ({name, options}) | | objectAdded | shape/text/icon/drawing added | | editorEvent | wildcard — every editor event as {event, payload} |

All outputs are emitted inside Angular's zone; the editor itself runs outside the zone so high-frequency canvas events don't trigger change detection.

The component is SSR-safe (it only initializes in the browser) and cleans up on destroy.

Headless service

import { inject, Injectable } from '@angular/core';
import { NpxImageEditorService } from 'npx-image-editor-angular';

@Injectable({ providedIn: 'root' })
export class ThumbnailService {
  private npx = inject(NpxImageEditorService);

  async makeThumbnail(file: File): Promise<Blob> {
    const editor = this.npx.createHeadless();
    await editor.loadImage(file);
    editor.cropToRatio('1:1');
    editor.resize(256, 256);
    editor.applyFilter('sharpen', { amount: 0.5 });
    return editor.export('webp', { quality: 0.85 });
  }
}

Full editor API

Everything documented in the npx-image-editor README is available on the editor instance — including applyFilter, cropToRatio, rotate, flip, addText/addShape/addIcon/addArrow, removeBackground, inpaintSelection, upscale, loadDICOM, applyGradient, exportSession, batchExport, plugins and custom tools.

License

MIT