Angular OCR Results Editor

Angular component that allows to edit and view OCR results data in UI.

Usage

app.component.html

<ng-ocr-editor-component
    [(document)]="demoDocument" [boudingBoxStyle]="boundingBoxStyle"
></ng-ocr-editor-component>

<img src="assets/demoImage.jpg" #demoImage hidden (load)="onImageLoad()"/>

app.component.ts

  boundingBoxStyle: BoundingBoxStyle = {
    color: '#627320',
    width: 2,
    selectedColor: '#4F4742',
    selectedWidth: 5,
    contrastColor: '#fff6f0',
    constastWidth: 1,
  };

  @ViewChild('demoImage') imageElement: ElementRef;
  demoMenu: demoDocument | null = null;

  onImageLoad() {
    this.demoDocument = {
      imageElement: this.imageElement.nativeElement,
      markup: [
        {
          text: 'Text',
          x1: 75, x2: 410, y1: 250, y2: 300,
        },
      ],
    };
  }

Build

npm install

ng serve demo-app

Issues

If you identify any errors in this module, or have an idea for an improvement, please open an issue.