Highlight a section inside pdf using Pdf.js

Question

I'm currently using pdf.js for my project to render PDFs.

Now there is this tricky task to highlight a section of a PDF page given the coordinates.

Example

Given a boundary section like [(31,35),(40,35),(40,40),(31,40)] I should highlight the given section with any primary color of choice.

How can I accomplish this task using Javascript and the pdf.js API?

Is it possible or am I sounding overambitious?

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

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