Angular Image Annotator

Description

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.

Getting Started

1. Install with Yarn/NPM

yarn add angular-image-annotator

or

npm install angular-image-annotator

2. Import AngularImageAnnotatorModule in your module

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

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

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

3. Add image annotator component to your HTML

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

4. Import AiaImageAnnotatorComponent in your component and reference with @ViewChild

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;
}

Annotator Component Public API

Bound properties

image: string

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.

color: string

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

fontFamily: string

The font family. Default: Georgia

fontSize: string

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

Functions

setTool(toolName: 'pencil'|'text'): void

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

undo(): void

Undoes the last action if available.

redo(): void

Redoes the last undone action if available.

clear(): void

Clears all annotations (undoably).

getAnnotatedImage(type: 'image/jpeg'|'image/png'): string

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

Notes

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

Development

Roadmap

[x] Function to generate final image

[ ] Ability to set max dimensions

[x] Support mouse events (desktop context)

Build

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

Running unit tests

Run ng test to execute the unit tests via Karma.