JSPM

A comprehensive Angular component for tagging images. Check out the demo for some examples.

Features

• Bounding Box (Rectangle, Square, Circle, and Ellipse), and Polygon Annotations
• Add, Edit, Drag, Rotate, and Delete Annotations
• Zoom and Pan
• Changing image on the fly
• Colorful annotations
• Raw or typed input/output

Usage

Install ngx-image-annotation using npm.

npm install ngx-image-annotation

Then you can just import the component:

import { AnnotatorComponent } from "ngx-image-annotation";

@Component({
  imports: [AnnotatorComponent],
  ...

and use it as below:

@ViewChild('annotator') annotator!:AnnotatorComponent;

<annotator  
  #annotator
  [naturalSize]="true"
  [imageUrl]="your-image-url"
  [shortcut]="{del: true, bksp: true }"
  (onReady)="annotator.drawRectangle()"/>

Now you can draw rectangles on the image by dragging the left mouse button.

Mouse and Keyboard events

• click: Edit/Stop Edit Annotations
• Ctrl + mouse wheel: Zoom
• Ctrl + mouse drag: Pan
• mouse drag: Drag/Edit/Rotate Annotations

when using [shortcut]="{del: true, bksp: true }" as an input (see Shortcut Settings):

• Delete/Backspace key: Delete Annotations

Inputs/Outputs

The following inputs/outputs can be sent to or received from annotator:

(*) required

Parent calls using @ViewChild

The parent component can access the annotator methods using the local variable technique. For example, you can start drawing circles as follows:

<button (click)="annotator.drawCircle()">Add Circle</button>

Below is a list of all methods:

Annotations with Categories

To attach one or more categories to an annotation, utilize onAdded and onContextMenu outputs being called when an annotation is drawn and right-clicked, respectively. Use shape.categories to get the previous categories as string[]:

showCategoriesDialog(shape: Shape) {
  console.log(shape.id) // 1
  console.log(shape.getCenterWithOffset()) // { X: 247.5, Y: 193 }
  console.log(shape.categories) // string []
  // Show a category selection component
}

<annotator
  (onAdded)="showCategoriesDialog($event)"
  (onContextMenu)="showCategoriesDialog($event)"
  ...

Finally, call annotator.updateCategories to update the categories of the annotation.

Shapes

The data models for all shapes are listed below:

Shortcut Settings

Below is a list of shortcuts that are configured through shortcut prop:

Contributing

• Fork the project.
• Make changes.
• Run the project in development mode: npm run start.
• Write your own tests and/or update existing ones in src/test dir.
• Check the new features and changes using demo.ts.
• Update README with appropriate docs.
• Commit and PR

Dependencies

The package is dependent on image-labeling package. The following peer dependencies must be specified by your project in order to avoid version conflicts: @angular/core, @angular/common. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.