Adding Annotation with PDF.js

Question

PDF.js is currently adding the ability to add annotation to a PDF, with an expected release on 1 May 23, with little to no documentation at all and no examples... I'm having a hard time putting things together, I was wondering if anyone could have a working example of a simple highlighter or a simple pen drawer?

I tried navigating through the web viewer in their codebase, but I'm having a hard time putting the pieces together.

Answer 1

Annotation in PDF.Js is a client function for adding temporary data via mouse and keyboard in the browser screen. You can see the source file (my choice of a 1KB blank) is OUTSIDE the browser in the second image (from a local folder), but could be a remote fetched URL resource just like the image is. Once saved locally it will be converted into PDF additions (at the EndOfFile) by the worker.js functions.

Clearly the biggest addition is a binary image.

I can not show here the whole PDF, but see in the image below, is the "blank run time" instructions, in the top white part, where it terminates with %%EOF. Then the additions follow for 61 KB.

The important point to note is that, the first item is a reference to all 3 additions so the extra entries were not held in page as they need to be finally indexed as /Annots [5 0 R 6 0 R 10 0 R].

• 5 = (Hello World!) with appearance as object 8
• 6 = /Rect [49.2 249.6 105 260.4] /InkList .... with additional metadata as object 7
• 10 is a stamping holder with more data in object 11 for the image as object 9

Now we get to the second EndOfFile and now there is a problem as it looks as if it breaks the normal rules since it is compacted, which should NOT be the case with this source.

12 0 obj
<< /Size 13 /Prev 213 /Type /XRef /Root 1 0 R /Info 3 0 R /Index [0 1 3 1 4 1 5 1 6 1 7 1 8 1 9 1 10 1 11 1 12 1] /ID [(¿¯]X9$'NˆcÀÉ£O) (#Eg‰«Íïþܺ˜vT2)] /W [1 2 2] /Length 55>> stream
  ÿÿ¼  >  ž  ~  -  à  Y  ñü  ò£  óZ  
endstream
endobj
startxref
62298
%%EOF