Angular Image Annotator

Description

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

Getting Started

$3

``bash
yarn add angular-image-annotator
`
or
`bash
npm install angular-image-annotator
`

$3

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

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

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

`

$3


`html

`

$3

`typescript
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

$3

#### 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

$3

#### 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

$3

[x] Function to generate final image

[ ] Ability to set max dimensions

[ ] Support mouse events (desktop context)

$3

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

$3

Run ng test` to execute the unit tests via Karma.