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
  • Stamp
  • Arrow
  • 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
  • Form fields like text field, checkbox, radio button
  • Digital Signature

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
  • Tooltips
  • 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
  • Print preview option to include watermark and annotations

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. And, while I do not have any physical tablets or smartphone with a good amount of RAM, this has been tested in an Android emulator.

Annotationeer also comes with a utility where users can import the annotations that they saved in PDF.JS to a physical PDF file using either of the following libraries:

  • Apache PDFBox
  • Asposeli>
  • iText

I have managed to create code in both Java and C#.

Oh yeah. One more thing. Annotationeer has also been tested to run in mobile browsers.

If you have inquiries regarding Annotationeer, please use the Contact Me link at the top of the page. I am also available for consultation in case you need help with your own implementation. Again, contact me for more details on my hourly rate.

NOTE: I have had emails wherein they mention that they contacted me through the Contact page but they never heard from me. This could be a server side issue of my hosting company not sending the email to me because for sure I would have replied to it. The best way is to comment in this post to make sure I get to read it. Thank you.

User Jarrod from the StackOverflow forum posted a very useful function to change the color of the image drawn in an HTML Canvas.

I modified his function to take into account where the image’s current position is in the Canvas.

Sadly, <li> is not supported in TextView. Only a few tags are actually supported by the widget so the options are pretty limited. You can either place your HTML code in a WebView or, if you really want to place it inside a TextView, you can use &#149; instead.

Related Posts Plugin for WordPress, Blogger...