我想在ng2-pdf-viewer中突出显示一个矩形
我想在ng2-pdf-viewer中突出显示一个矩形
提问于 2020-11-18 12:17:45
我已经创建了一个OCR应用程序，当一个pdf文件被处理时，我得到一个边界框，它显示了我想要使用的pdf文件中的文本的坐标，并在我的pdf查看器中突出显示它。我使用的是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种方法，但它们都不起作用，而且我无法在网上找到解决方案。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-20 12:17:38
在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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64887027
复制相关文章
相似问题
腾讯云开发者
