Pdf.js: Get the position of the selected text

[todg]

Hello!
I wonder if there is a function which return the position of the selected text of a pdf-file, i explain why.
In gross,in my project i can open files and put a comment where the text is selected, the position is saved in order to put back the comment when the file is relaoded.
So my question is, is it possible to do that with pdf.js opening a pdf file?
Thanks!!!

[gigaherz]

I don't know if there's any such function, but the PDF.js code must have some code to calculate the position of the text divs based on the text position within the PDF, so the information is there somewhere.

[yurydelendik]

Use getSelection method https://developer.mozilla.org/en-US/docs/DOM/window.getSelection and offsetTop and offsetLeft of the text/div element. One of its parent indicates page number. (To convert to page coordinated use viewport.convertToPdfPoint). Closing as answered.

[sid-thakur]

@yurydelendik I am trying to create persistent highlights of text in PDF that are re-drawn after a PDF is re-opened. While I am able to get coordinates in PDF page (using viewport.convertToPdfPoint), how would you convert them back to screen coordinates?

I would like to overlay divs with semi-transparent colored background over previously highlighted text to mimic highlighting as in standard PDF document readers. This is in reference to https://github.com/mozilla/pdf.js/blob/master/examples/text-selection/js/minimal.js

I tried using viewport.convertToViewportPoint but I am unable to correctly recover location of highlighted text relative to parent div element. Thanks.

[yurydelendik]

@sid-thakur, here is rough code to get coordinates in PDF space of the selection and then show this selection. https://gist.github.com/yurydelendik/f2b846dae7cb29c86d23 . It does not really matter what zoom or rotation is selected. Current example works only in bounds of the single page, but can be extended to work in multiple pages. The example shows only how to use convertToPdfPoint/convertToViewportPoint, and not how to operate with DOM or add new items there.

This is in reference to https://github.com/mozilla/pdf.js/blob/master/examples/text-selection/js/minimal.js

This example introduces some confusion on how to implement custom text layer and will be removed with #5552.

[sid-thakur]

@yurydelendik - Thanks for the pointer.

[Anirudhmodi]

@yurydelendik - can you please tell to use the fucntion you showed, I am not being able to figure out how to use the funciton

[yurydelendik]

@yurydelendik - can you please tell to use the fucntion you showed, I am not being able to figure out how to use the funciton

@Anirudhmodi I don't understand the question. Add https://gist.github.com/yurydelendik/f2b846dae7cb29c86d23 to your viewer and call the showHighlight(getHightlightCoords()). You can use browser devtools to execute the code.

[wjanoti]

Hi @sid-thakur , did you manage to create the persistent highlighting?

[rspsuresh]

is possible canvas page page text highlighting and store as a pdf .anybody help me .

[SaddamDeveloper]

can I store the highlighted data in the storage?