基于原生pdf坐标在pdfjs画布中突出显示区域

Question

我正在使用 pdf.js 在浏览器中显示 pdf 文件。我想根据从 Nuance 的 OCR 获得的原生 pdf 坐标突出显示 pdf 中的某些区域。目前我正在绘制一个矩形（通过创建一个 div 并将其添加到父元素。）。然而，我绘制的矩形总是偏离预期位置。

Can somebody help me on how to transform the native pdf coordinates to the exact position on the canvas/viewport, so that I can place my div on the right position to highlight the correct area. 
Any help would be greatly appreciated.
The following is the code I am using to highlight:

function HiglightContent(page, viewport, canvas)
    {
        var pageNumber = 1;
        //native pdf coordinates from OCR in the following order -[top,left,bottom, right]

var pdfRect = [2486, 1272,2640, 3538 ];

        //var pageView = window.PDFViewerApplication.pdfViewer.getPageView(1);
        var pageView = page;
        //var screenRect = pageView.viewport.convertToViewportRectangle(pdfRect);
        var screenRect = viewport.convertToViewportRectangle(pdfRect);

        var x = Math.min(screenRect[0], screenRect[2]), width = Math.abs(screenRect[0] - screenRect[2]);
        var y = Math.min(screenRect[1], screenRect[3]), height = Math.abs(screenRect[1] - screenRect[3]);

        var pdfPoints = viewport.convertToPdfPoint(x, y);
        x = pdfPoints[0];
        y = pdfPoints[1];
        // note: needs to be done in the 'pagerendered' event
        var overlayDiv = document.createElement('div');
        overlayDiv.setAttribute('id','dvHighlightRect');
        overlayDiv.setAttribute('style', 'background-color: rgba(0,255,0,0.3);position:absolute;' +
          'left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;');
        //pageView.div.appendChild(overlayDiv);
        canvas.parentElement.appendChild(overlayDiv)
        // scroll
        //scrollIntoView(pageView.div, { top: y });
        //scrollIntoView(overlayDiv, { top: y });
    }

The following is the code I am using to display the PDF:
    var baseURL = "pdfFilePath";
    var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale =1.5,
    canvas = document.getElementById('the-canvas')

    ctx = canvas.getContext('2d');

    var Print_Resolution_DPI = 300;
    var Print_Units = Print_Resolution_DPI / 72.0;


    PDFJS.imageResourcesPath = baseURL + "//" + "Scripts/pdf.js/images/";
    PDFJS.workerSrc = baseURL + "//" + "Scripts/pdf.js/build/pdf.worker.js";
    PDFJS.cMapUrl = baseURL + "//" + "Scripts/pdf.js/web/cmaps/";


    $("#next").click(onNextPage);
    $("#prev").click(onPrevPage);

    PDFJS.getDocument(baseURL + "//" + "TestFile/test.pdf").then(function (pdf) {
        pdfDoc = pdf;
        $("#page_count").text(pdfDoc.numPages);
        // Initial/first page rendering
        renderPage(pageNum);
    });

    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                //transform: [Print_Units, 0, 0, Print_Units, 0, 0],
                intent: 'display'
            };
            var renderTask = page.render(renderContext);
            getViewPortCoordinates(viewport);
            HiglightContent(page, viewport, canvas);
            //HighlightSelectedText(page, viewport, canvas);
            // Wait for rendering to finish
            renderTask.promise.then(function () {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });

            //setupAnnotations(page, viewport, canvas, $('.annotationLayer'));
        });
        // Update page counters
        $("#page_num").text(num);
    }