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.

Do not waste your time Googling on how to create a 2D measurement annotation in iText or any kind of measurement for that matter because it is not supported.

Yet. Hopefully soon the people behind iText will have this feature soon.

The only solution for this would be coding it in a low level approach. Meaning, you will have to look up Adobe’s documentation on PDF and add the necessary properties in iText’s dictionary to be able to simulate a distance measurement annotation.

Using iText to create PDF and Annotations can be hard at first. I learned it the hard way since it was my first time to take a crack into doing it. While this post does not provide the source code on how to do it (sorry, I am not giving it away for free but you can buy it from me), here are some tips to help get you started.

1) The coordinate system in PDF is different
I created an annotation layer in PDF.JS so I could create annotations on top of PDF pages. Naturally, I stored the annotation coordinates to keep track of its location. When I used the annotation data to create a PDF embedded with them, I was surprised that the positions were incorrect. It turned out the y-coordinate is actually from bottom to top instead of top to bottom. No worries though, you can create a function that will return the bottom-to-top y-coordinate based on your top-to-bottom y-coordinate. Bruno Lowagie actually provided a function for that in some StackOverflow forum post.

2) No SVG library for C# that iText can use to use as images
I created both a Java and C# implementation for this and I could not find a C# library that could let me use an SVG image in iText. Java has a 3rd party library for that though.

3) Do not get confused with Adobe Acrobat and Adobe Acrobat Pro’s comment window
Yes, I have to admit I got confused at first when I set all my comments to locked and read-only I thought that it did not work because the look and feel in Acrobat and Acrobat Pro looks different. If you have Acrobat Pro or Acrobat X, better use that to see your output PDF generated by iText as it gives a better presentation on how you set your annotations’ properties like locked and read-only.

4) If you used PDF.JS to save annotations and export them using iText, the page dimensions are different.
I created annotations using PDF.JS and its page dimensions at scale 100% are different in an actual PDF page when viewed in Acrobat. In order to position them correctly in a physical PDF file, create a function that will return the x and y coordinate of a physical PDF page’s dimension based from the PDF.JS annotation position and its page dimension. Sounds confusing? Here is a sample pseudo function with parameters.

5) Search in Google on how to create annotations using iText
Most annotation types (rectangle, circle, line, arrow, free text, free hand drawing, text underline, text strike-through, text highlight, stamp, icons) that my web application featured have samples provided by Bruno Lowagie in his iText documentation website and StackOverflow forum.

6) Converting to Java, C# or vice-versa is not hard
Once you implemented code using Java or C#, it is not hard to do considering most if not all of the classes are the same. It is just a matter of renaming some naming conventions on properties and methods

Related Posts Plugin for WordPress, Blogger...