PDF Annotator with JSON layers

Question

I am attempting to create a pdf annotator using PDF.js and a HTML5 drawing app to create a JSON file.

Using this: https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html

Maybe this: http://codecanyon.net/item/html5-drawing-tools/8869338?WT.oss_phrase=&WT.oss_rank=2&WT.z_author=appsandsites&WT.ac=search_thumb

to create a JSON like http://www.html5rocks.com/en/tutorials/canvas/integrating/#web

Any thoughts or suggestions on how to do this? Do you think I could use PHP to create and place the file on my server?

Direction on the best way to do this is appreciated.. what version of JSON, how to use canvas to create a file and edit it, etc

Update, I want to lay this over PDF.js:

https://github.com/trsanders/responsive-sketchpad

and then in PHP create a JSON file that stores the url of a PDF and the URL to the generated json/image.

Update 2/23

I found a document browser in Perl with flexpaper which lays aframework foundation for what I want to do, but does not add in drawing support. What I was thinking is the above image.

http://eric-blue.com/2010/02/12/example-document-browser-code/

Answer 1

Hypothes.is supports text annotation of PDFs (via PDF.js and Annotator). The plan at The Hypothesis Project (a non-profit...also where I work, fwiw) is to upstream the PDF related features that have been made to its customized Annotator, so they'll be available to more developers.

Here's an example of Hypothes.is loaded on a PDF via a proxy. The same functionality is provided without the proxy by using a bookmarklet in Firefox or the Hypothes.is Chrome extension.

Additionally (if you're wanting shape drawing on top of PDF.js rendered PDFs), you might check out the Annotorious polygon preview. Similar to what you've described, plus annotation, plus storage...though I don't believe it works on PDFs...just images.

There is also ongoing work being done at the W3C to build an interoperable annotation data model. Checkout the Annotation Working Group for more information.

Lastly, PDF.js is also getting work done to it now to support PDF-level annotations. Eventually, it should give PDF.js a strong foundation for exposing annotations loaded from other sources.

Hopefully that's enough to get you started. :)