Highlight a section inside pdf using Pdf.js

Question

I\'m currently using pdf.js for my project for rendering pdf Now there is this tricky task to highlight a section of pdf page given the co-ordinate

example

Answer 1

One of the authors for PDF.js, cjones, has stated:

No, and that’s (highlighting) not like something we would add to pdf.js. That ought to be easy to layer on top of pdf.js.

Source: http://blog.mozilla.org/cjones/2011/07/03/pdf-js-first-milestone/

You will need to implement it yourself if you are interested in using this functionality.

Answer 2

If selecting text could be sufficient for your needs, you might find an entry for your solution in SO about highlighting text in PDF.js.

The text is selected via document.getSelection().

Adjustment for color as you said can be accomplished by using

<span style="yourColorDefinition">

instead of

<span class="hightlight">

Answer 3

I found a better way to achieve this find the co-ordinate of the point in the html page

and then subtract the co-ordinate(position) of div.textLayer from it to find the co-ordinate

of the text in the pdf displayed online.

In order to find the co-ordinate of the text in actual pdf find the aspect ratio and you would

get the actual co-ordinate

example

if the pdf displayed online is 800x900 and the text co-ordinate

[(31,35),(40,35),(40,40),(31,40)]

and the actual pdf size is 612x792

find the appropriate value of the area in actual pdf like this

(612/(800 / 31)),(792/(900/35))

and do this way for all co-ordinate found in online

i.e

(40,35),(40,40),(31,40)

NOTE: -

Might want to check the PDF.js API called convertToPdfPoint