Angular17 I need to draw a rectangle over pdf selected zone and get the exact coordinates to be used later in OCR the Zone

Question

I need to draw a rectangle over pdf selected zone and get the exact coordinates to be used later in OCR the Zone. I have used ngx-extended-pdf-viewer but it didn't do it. Then I tried to add a canvas but it disabled the viewer controls and it draws the rectangle far away from the selected area.

Here is the code I used

HTML

<div style="position: relative;width: 50%;height: 90vh;" class="col-6">                                     
   <ngx-extended-pdf-viewer 
   [base64Src]="base64string.split(',')[1]"
   height="90vh" 
   [zoom]="'page-actual'"
   [useBrowserLocale]="true" 
   [textLayer]="true"
   [showHandToolButton]="true">
   </ngx-extended-pdf-viewer>     
   <canvas style="position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;border: red 2px solid;" (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)"></canvas>
</div>

TypeScript

onMouseDown(event: MouseEvent) {
  if(this.fileDroped){
    const canvas = document.getElementsByTagName('canvas')[0];
    if (canvas) {
      const rect = canvas.getBoundingClientRect();
      this.startX = event.clientX - rect.left;
      this.startY = event.clientY - rect.top;
      this.isDrawing = true;
    }
  }
}

onMouseUp(event: MouseEvent) {
  if(this.fileDroped){
    const canvas = document.getElementsByTagName('canvas')[0];
    if (canvas && this.isDrawing) {
      const rect = canvas.getBoundingClientRect();
      this.endX = event.clientX - rect.left;
      this.endY = event.clientY - rect.top;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 2;
        ctx.strokeRect(this.startX, this.startY, (this.endX - this.startX), (this.endY - this.startY));
      }
      console.log((this.startX)+','+(this.startY)+','+((this.endX - this.startX))+','+((this.endY - this.startY)) );
      this.isDrawing = false;
    }
  }
}

I have tried ngx-extended-pdf-viewer and canvas. I also tried ng2-pdf-viewer but it didn't event show the pdf. I also tried src = file and src= base64string.

Answer 1

i was facing the same issue, actually you ll have to calculate the bezier control points and pass them to bezier array. i have calculated and assigned x and y points inside the bezier object itself.

public addDrawing(x: number, y: number, height: number, width: number, opacity: number, thickness: number, page: number): void {

const drawing: InkEditorAnnotation = {
  annotationType: 15,
  color: [79, 129, 189],
  thickness: thickness,
  opacity: opacity,
  paths: [
    {
      bezier: [
        x, y,
        x + width / 3, y,
        x + 2 * width / 3, y,
        x + width, y,
        x + width, y + height / 3,
        x + width, y + 2 * height / 3,
        x + width, y + height,
        x + 2 * width / 3, y + height,
        x + width / 3, y + height,
        x, y + height,
        x, y + 2 * height / 3,
        x, y + height / 3,
        x, y
      ],
      points: [x, y, x, y + height],
    },
  ],
  pageIndex: page,
  rect: [x, y, x + width, y + height],
  rotation: 0,
};
this.pdfService.addEditorAnnotation(drawing);

}

Answer 2

I also want to implement the same functionality in my OCR application.

For the issue where the PDF in ng2-pdf-viewer is not showing, you just have to give a custom height property to it.