I had been receiving quite a number of inquiries regarding my video on how to create annotations in PDF.JS.
First and foremost, I call my web application Annotationeer. It is built on top of PDF.JS. It has the following annotations:
- Square fill
- Square border
- Circle fill
- Circle border
- Sticky note
- Measurement distance (like in Adobe Acrobat tool)
- Measurement area (like in Adobe Acrobat tool)
- Audio (in MP3 or OGG)
- Free hand drawing
- Free hand text (1 liner)
- Text Underline
- Text Highlight
- Text Strike-through
All annotations come with a comment and properties like background and foreground color, measurement units in inches, centimeter or millimeter and font size to name a few. These same annotations can be accessed through the sidebar as a list where you can scroll through as well as a comments popup window to initiate a chat history for every annotation.
Some nifty features that can be configured based on the user’s preference:
- Scales annotations based on zoom value
- Rotates annotations based on page rotation angle
- Showing annotation list in the left or right sidebar
- Saving all annotations using the save button or through every action
- Watermark in every page
- Screenshot of a selected dragged area in the page converted to an image
- Property popup to modify annotation properties
- Comment popup to modify and add reply comments
- Runs on any PDF.JS version.
These annotations are saved and retrieved through RESTful URLs that I created using Silex PHP Framework and using MySQL as database or Couchbase’s NoSQL while producing outputs in JSON format.
The web application can run in IE and Webkit based browsers like Chrome and Firefox and works on mobile browsers and usable when integrated in hybrid apps.
Annotationeer also comes with a utility where users can import the annotations that they saved in PDF.JS to a physical PDF file using iText. I have managed to create code in both Java and C#.