ngx-image-to-toon

Angular bindings for image-to-toon — an injectable CaricatureService and the standalone <ngx-caricature-generator> component.

▶︎ Try it in the live playground →

Upload a photo, switch styles, drag the sliders, download the result. Everything runs in your browser — no upload, no account, no key.

npm i ngx-image-to-toon

Angular 16+ (standalone APIs and signals). Ships Ivy partial-compiled FESM2022 via ng-packagr.

Drop-in component

import { Component } from '@angular/core';
import { NgxCaricatureGeneratorComponent } from 'ngx-image-to-toon';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxCaricatureGeneratorComponent],
  template: `
    <ngx-caricature-generator
      [config]="{ mode: 'grayscale', edgeStrength: 0.9 }"
      [autoProcess]="true"
      (processed)="onProcessed($event)"
      (failed)="onFailed($event)"
      (cleared)="onCleared()"
    />
  `,
})
export class AppComponent { /* … */ }

The sketch style and its sketch / pencil / marker presets are supported by the engine but not shown by default. Opt in with styles and presets — the allow-lists validate against everything the engine supports, not just what is shown.

Inputs: config, validation, driver, segmentation, autoProcess, showControls, showActions, showPresets, showBackground, showPreview, showFormatPicker, downloadFormat, downloadFileName, debounceMs. Same two-column layout as the React component: numbered step cards on the left, a sticky live-preview card on the right. Outputs: processed, failed, cleared. Projected content renders below the controls.

Restricting what the end user sees

presets, styles, backgrounds, modes, sliders and formats each take a subset. Omit an input and you get everything; supply one and only those render, in the order you give. Unknown values are dropped rather than rendered. A single-entry modes or styles hides that control entirely.

<ngx-caricature-generator
  [presets]="['cartoon', 'sketch']"
  [styles]="['cartoon', 'sketch']"
  [backgrounds]="['original', 'blur']"
  [modes]="['color']"
  [sliders]="['edgeStrength', 'smoothness']"
  [formats]="['png']"
/>

presets also takes your own definitions — a partial config with a name, mixed freely with built-in names:

readonly presets = [
  'cartoon',
  'comic',
  { name: 'vintage', label: 'Vintage', config: { style: 'painting', saturation: 0.55, contrast: 1.25 } },
  { name: 'bold-comic', label: 'Bold comic', config: { ...PRESETS.comic, edgeThickness: 3 } },
];

Styling is driven by custom properties on the host, so a single rule restyles the widget:

ngx-caricature-generator {
  --itt-accent: #14b8a6;
  --itt-border: rgba(0, 0, 0, 0.15);
  --itt-radius: 8px;
}

Service

@Component({
  standalone: true,
  imports: [CommonModule],
  providers: [CaricatureService],           // component-scoped instance
  template: `
    <input type="file" (change)="onFile($event)" />
    <img *ngIf="toon.resultUrl() as url" [src]="url" alt="Caricature" />
    <p *ngIf="toon.state().isProcessing">{{ toon.state().progress * 100 | number: '1.0-0' }}%</p>
  `,
})
export class ToonifyComponent {
  readonly toon = inject(CaricatureService);

  onFile(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) this.toon.process(file);
  }
}

State is available as a signal (toon.state(), toon.sourceUrl(), toon.resultUrl()) and as an observable (toon.state$), so it works in zoneless signal apps and classic RxJS apps alike.

Methods: process(), load(), reset(), cancel(), setMode(), setStyle(), setBackground(), applyPreset(), setSegmentation(), updateConfig(), resetConfig(), setDriver(), configure(), downloadImage(), getBlob(), getBase64(), getCanvasElement(), toFormData(), toJSON(), and instance for the raw engine.

this.toon.applyPreset('marker');                          // bold line art
this.toon.setStyle('painting');
this.toon.setBackground('solid', { backgroundColor: '#f0b429' });
this.toon.setSegmentation(createMediaPipeSegmentation()); // pixel-accurate cutouts

Omit the providers array to share the root singleton across your app instead.

Full API reference: https://github.com/mamta-epili/image-to-toon#readme

License

MIT