Please refer to this link: Annotationeer: My Web Application That Can Create Annotations In PDF.JS.
Here is a video of what I did in action.
Here is a video of more annotations as well as a right sidebar list syncing the actions of annotations done in the canvas with the list.
If you have inquiries regarding Annotationeer, please use the Contact link at the top of the page.
Hi!
That seems quite feasible. I haven’t yet tested it out.
Can you provide a working demo?
Thanks.
@sandeep that image is already my working application. if you need outsourcing help on thia do let me know
HI there, I’m looking to do exactly the same thing with PDF.JS but I’m not a javascript expert by any means. Are you able to point me towards some sample code or demo etc I could run through? Thanks!
@nathan: there are already source codes that create shapes in a canvas. You can Google it. With regards to PDF.JS, the points mentioned in my article should help you get started.
hi! I just want to thank you for this awesome blog.It helped me a lot and i couldn’t help not thanking you 🙂
This is cool, have you moved this from R&D to a product, or have others done this. Have you tested/tried on a tablet device.
@steve: yes, i have tested this in mobile browsers
Can you show the code of how done it.. not a javascript expert .. can you help in it
@akashdeep: sorry, the code is not free. you can buy it if you want
Hello.
I need a little help.
I want to put my remarks with comments on pdf.js. Individual users should be able to comment. Should I keep notes on display at a later stage of group users.
Can you help and what will be the price, please answer my mail.
Does it work in all web browsers? For some reason cloned canvas turns to black once I call getContext(“2d”) on it. This happens in Firefox only. :-/
hi. yes it works in all browsers. that happened to me too on new versions of pdf.js so i changed the way i cloned the canvas.
Do you have any tip on that? I am using JQuery’s clone as you suggested.
Checking on my current code, I did not clone it this time. instead i created a new canvas element from scratch, then copied the attributes of the PDF.JS canvas and set them manually to my created canvas object.
I am creating a new canvas element and adding it to pageContainer div, still the same. Canvas turns black the same moment i call getContext. :-/
@usyi: there is something wrong with the way you coded it. I dont have a problem here.
So how did you compute the rectangular bound when scaling or figuring out the bounds for the scale of 1 when the user draws an annotation at 1.25?
@kyle: mouse listeners will calculate the width and height rectangular bound width then divide it by scale value
Hi blogmeister
I’ve made it so far that I am able to initially draw annotations in PDF.JS
and made it also possible to create new annotations and resize/move those.
But I have one issue, when I scroll down in PDF.JS, my annotations also scroll (good!)
but, I am not able to correctly reconnect the mouse to them.
ie. when I scroll 5 pixels down, I have to pick up the annotation 5 pixels below the annotation otherwise I can’t move it.
Any advise?
Best regards
@ka: hi. sorry, i can only guess. does this happen when you do the scroll after you resize or move the annotation? because if that is the case, then perhaps your annotation bound is not calculated correctly.
Hi !
Yes, it is
scrolling/moving after resizing/drawing.I suppose I have to recalculate the bounds of all annotations during scrolling?
Thnx.
@ka: hi, the way i understood is that moving the annotation is not the same as scrolling since you are scrolling the browser, right? So if you move or resize the annotation, recalculate its x, y, width and height. but also keep a value of these at 100% zoom value since this is the basis of an annotation’s original size. I keep 2 values of them whenever i resize and/or move the annotation and when the annotation gets saved to the database, only the x, y, width and height value at 100% zoom value is kept.
Can you do the annotation in 100th page?
@prabhu: hi. have not tried it but it should since it is only an added layer on top of a pdf.js page. if pdf.js can show it without lag, there should be no problem as well with annotationeer.