How to set the bounds in Syncfusion React PDF View using annotation

Question

I have a Syncfusion React PDF viewer and am performing OCR using Azure Cognitive Service.

When the user searches in the PDF file, the Azure services will return the bounds. Using these bounds, I need to highlight the text in the PDF file. I have shared below the response I get from the Azure Cognitive Services.

How can I highlight the text in my PDF file using these bounds?

  {
    "docs": [
        {
            "id": null,
            "fileName": "sample.pdf",
            "pages": [
                {
                    "id": 0,
                    "box": "0 0 1224 1584",
                    "words": [
                        {
                            "id": 42,
                            "text": "patient",
                            "box": "366 156 403 169"
                        },
                        {
                            "id": 1258,
                            "text": "Patient",
                            "box": "35 1373 83 1386"
                        }
                    ]
                },
                {
                    "id": 1,
                    "box": "0 0 1224 1584",
                    "words": [
                        {
                            "id": 11,
                            "text": "Patient:",
                            "box": "98 124 179 146"
                        }
                    ]
                }
            ]
        }
    ]
}

Answer 1

I can able to set bounds in the pdf viewer. Here I have given below the code snippet. Here 1.5 is calculated using the below formula.

page ratio = Azure cognitive page size width or height / PDF Viewer page size width or height

from the above am getting a page ratio = 1.5, then am dividing the x value and y value

var word = '694 170 836 212';
var wordBox = word.split(' ');
var xVal = parseFloat(wordBox[0] / 1.5);
var yVal = parseFloat(wordBox[1] / 1.5);
var widthVal = parseFloat(xVal);
var heightVal = parseFloat(wordBox[3]) - yVal;
pdfViewer.annotation.addAnnotation("Highlight", {
bounds: [{ x: xVal, y: yVal, width: 90, height: 25 }],
 pageNumber: 0,
 }
);