Create Annotations in PDF.JS Part 2

Video ready, click here to close ×


For inquiries, please email droidgox@gmail.com

My implementation of creating annotations in PDF.JS with more features like arrow, free hand drawing, free text, text selection highlight/underline/strike-through, measurement, circle and stamp using plain Javascript and the right sidebar list linking the annotations in the canvas using Angular JS.

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…

source

13 comments

Leave a Reply

Your email address will not be published. Required fields are marked *