An Angular library for in-browser image annotation (think MSPaint on the canvas). View demo.

Contributions/issues welcome. Please open an issue before submitting a PR.

yarn add angular-image-annotator

or

npm install angular-image-annotator

import { AppComponent } from './app.component';

import { AngularImageAnnotatorModule } from 'angular-image-annotator';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularImageAnnotatorModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<aia-image-annotator #annotator [image]="myImage" [fontSize]="'36px'" [fontFamily]="'Times'" [color]="'#000000'"></aia-image-annotator>

import { Component, ViewChild } from '@angular/core';
import { AiaImageAnnotatorComponent } from 'angular-image-annotator';

@Component(...)
export class MyComponent {
  myImage; // Instantiate with your image

  @ViewChild('annotator') annotator: AiaImageAnnotatorComponent;
}

The image to annotate. Can be data URI or a URL.

NOTE: Changing this property results in all annotations from the previous image being cleared.

Hex color string. Default: #1218CE (deep blue)

The font family. Default: Georgia

The font size (including units). Default: 15px

Changes the current tool. Supported tools are pencil and text.

Undoes the last action if available.

Redoes the last undone action if available.

Clears all annotations (undoably).

Returns annotated image as data URI. Default image type is 'image/png'.

• This library currently only supports a mobile context (touch events).

[x] Function to generate final image

[ ] Ability to set max dimensions

[x] Support mouse events (desktop context)

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Run ng test to execute the unit tests via Karma.