Making PDF.js Draw Annotations
The PDF.js library consists of three different layers that all work together to render and display files. A core layer interprets the binary data in a file before passing it on to a display layer that renders the PDF itself into a <canvas> element. The viewer layer provides the main interface that allows people to view and interact with the file. Out of the box, however, the viewing layer doesn’t provide much in the way of functionality. Interaction is fairly limited without substantial extra development work to add capabilities like mobile screen responsiveness or high fidelity zoom. The core and display layers also don’t display the full PDF specification and struggle with lengthy documents and image-intensive files.
When our team started developing Accusoft PDF Viewer, the very first step was to shore up those support and rendering deficiencies. After making a number of key optimizations to improve rendering speed and fidelity, search speed, and mobile responsiveness, adding a PDF.js annotation layer was among the first priorities. This process was made a bit easier since Accusoft PDF Viewer uses a custom-built viewing layer rather than the default PDF.js viewing layer. In addition to providing a number of performance benefits, building a new viewer gave the team a great deal of control over how users can view and interact with documents.
The Professional version of Accusoft PDF Viewer supports multiple different types of annotations, all of which can be incorporated into the customized user interface. This allows developers to quickly integrate PDF viewing capabilities into web applications, enable annotation controls, and then retrieve and load markups whenever the file is retrieved for viewing.
Accusoft PDF Viewer Professional offers several annotation tools. Since the SDK allows developers to customize the viewing interface to fit their application’s needs, one or all of these markup types may be removed from the toolbar if necessary. This may be desirable for situations where a document should only be available for viewing.
- Ellipse/Circle: A classic oval shape, the ellipse tool can be adjusted in a number of ways to expand its functionality. Developers can set qualities such as opacity, fill color, and border thickness as needed.
- Rectangle/Square: Typically used to draw boxes around text, the rectangle tool can be customized to meet annotation needs by altering the border thickness and color, adjusting opacity, or designating fill color.
- Line: Line markups are one of the more versatile annotation types. Accusoft PDF Viewer allows users to not only change the color and thickness of the line, but also to determine whether the line features a triangle end head, which allows it to serve as an arrow.
- Free Hand Annotation: The freehand annotation tool allows users to freely draw on a document using their mouse, finger, or stylus. It’s often used to provide quick feedback on a document, especially on mobile devices.
- Text Highlight: Much like a highlighter pen back in school, the text highlight tool can be used to select and apply a background color to text. When reviewing documents, it can be deployed to highlight sections of content that require closer attention in the future.
Unlock the PDF Potential of Your Application
Accusoft PDF Viewer was designed with responsive support for mobile displays right out of the box, making it an ideal solution for web applications accessed from multiple devices. It also incorporates three decades of Acusoft’s experience with image processing and document rendering to deliver a viewing experience that’s head and shoulders above open-source PDF.js solutions. Find out how easily your application can add high-performance PDF capabilities by downloading a trial of Accusoft PDF Viewer today.