我想在 ng2-pdf-viewer 中突出显示一个矩形答案

【问题标题】：I would like to highlight a rectangle in ng2-pdf-viewer我想在 ng2-pdf-viewer 中突出显示一个矩形
【发布时间】：2021-06-04 00:33:43
【问题描述】：

我创建了一个 OCR 应用程序，当处理 pdf 文件时，我得到一个边界框，它显示 pdf 文件中文本的坐标，我想使用它并在我的 pdf-viewer 中突出显示它。我正在使用 ng2-pdf-viewer。

<pdf-viewer *ngIf='extension=="pdf" || extension == "PDF"' [src]="selectedPDF[index]"
          [original-size]="true" [fit-to-page]="true" class="pdf-viewer-class">
</pdf-viewer>

我已经尝试了 2-3 种方法，但它们都不起作用，我无法在线找到解决方案。

【问题讨论】：

为此您需要使用 JavaScript 例如：here

标签： angular

【解决方案1】：

在html中：

<canvas #myCanvas width="860px" height="1106px" style="z-index: 20;position: absolute;left: 0;"></canvas>
          <pdf-viewer id="pdfViewerID" *ngIf='extension=="pdf" || extension == "PDF"' [src]="selectedPDF[index]"
            (after-load-complete)="afterLoadComplete($event)" [show-all]="false" [(page)]='pageNumber'
            [original-size]="true" [fit-to-page]="true" class="pdf-viewer-class"
            [render-text]="true" [render-text-mode]="2">
          </pdf-viewer>

在 Ts 中：

 @ViewChild('myCanvas') myCanvas: ElementRef<HTMLCanvasElement>;
    
      public context: CanvasRenderingContext2D;
    this.context = this.myCanvas.nativeElement.getContext('2d');
    this.context.beginPath();
            var editedboundingBox = this.getOuterRectanglePoints(boundingBox);
            this.context.moveTo(editedboundingBox[0],editedboundingBox[1]);
            this.context.lineTo(editedboundingBox[2],editedboundingBox[3]);
            this.context.lineTo(editedboundingBox[4],editedboundingBox[5]);
            this.context.lineTo(editedboundingBox[6],editedboundingBox[7]);
            this.context.lineTo(editedboundingBox[0],editedboundingBox[1]);
            this.context.fillStyle = 'rgb(255, 153, 171, 0.3)';
            this.context.fill();
            this.context.strokeStyle = 'darkred';
            this.context.lineWidth = 2;
            this.context.stroke();
            this.context.closePath();

【讨论】：