Custom Annotation

PDFJS annotation along with Teserract to capture the data from PDF using angular -6.

Extended for PDF annotate JS library.

Installation

Use the package manager npm to install custom annotation.

npm install customannotation

Configuration

Method 1 :

in angular.json add the below snippet for dependent JS files

  .......

  "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/customannotation/assets/JS",
                "output": "/assets/JS"
              }
            ]

  .......

                                (or)

Method 2 :

copy JS folder from ..node_modules/customannotation/assets and paste 
it into your project mainroot/assets/JS to load dependent JS files 

Usage

in app.module.ts file add the below snippet to import the annotation module

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomannotationModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

in app.component.html file add the below code

 <lk-annotation [(PDFannotations)]="PDFAnnotations" [config]="PDFConfig"
 (pageChanged)="onPageChange($event)" (highlightAnnotationEvent)="annotationHighlight($event)"
  documentId="{{filePath}}" (isPdfLoaded)="endOfPdfloading($event)"></lk-annotation>

in app.component.ts file add the below lines

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CustomannotationComponent, PDFconfig } from 'customannotation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation:ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  title = 'pdftest';
  PDF_info: any = { "currentPage": "1", "totalPages": "" };
  PDFConfig: PDFconfig = { "loadallpages": false, 
                           "history_enabled": false, "rotate": "0", "zoomLevel": 1, 
                           "totalpages": 1, 
                           "useteseract": false,"viewerId":"test-viewer" };
 
  PDFAnnotations: any = [];
  filePath: any = "";

  @ViewChild(CustomannotationComponent)
  private lkannotationcomponent: CustomannotationComponent;
  default_zoom: any;

  ngOnInit() {
    // pass base64 (or) file URL path
    this.filePath = "https://www.hq.nasa.gov/alsj/a17/A17_FlightPlan.pdf"; 
    this.PDFAnnotations = [{
          "x": 167,
          "width": 1989,
          "y": 498,
          "height": 83,
          "page": 1,
          "uuid": "cd21f-ce18-8ad-07d9-c0c6ed8",
          "class": "Annotation",
          "type": "area",
        }];
  }

  annotationHighlight(event) {
    console.log(event);
  }
  endOfPdfloading(event) {
    console.log(event);
  }
  onPageChange(event) {
      this.PDF_info.currentPage = event;
      this.PDF_info.totalPages = this.PDFConfig.totalpages;
  }
 /* set zoom function*/
  setZoom(zoomtype) {
    if (this.default_zoom == undefined) {
      this.default_zoom = JSON.parse(JSON.stringify(this.PDFConfig.zoomLevel));
    }
    switch (zoomtype) {
      case 'in': {
        this.PDFConfig.zoomLevel = this.PDFConfig.zoomLevel - 0.2;
        break;
      }
      case 'out': {
        this.PDFConfig.zoomLevel = this.PDFConfig.zoomLevel + 0.2;
        break;
      }
      case 'reset': {
        this.PDFConfig.zoomLevel = this.default_zoom;  
        break;
      }
    }
 }
 /* to hilight the annotation*/
 hilightAnnotation(uuid){
    this.lkannotationcomponent.highlightAnnotationEvent(uuid);
  }
 /* to edit the annotation*/
 editAnnotation(uuid){
    this.lkannotationcomponent.editAnnotationEvent(uuid);
 }
}

Contributing

For major changes, please open an issue first to discuss what you would like to change.

License

MIT