Annotating raster images (e.g. JPEG, PNG, TIFF) online with the PDFTron WebViewer

[Support]

Q:

We have a need to be able to load and add annotations to images. Getting the image to load in the reader control was pretty simple. We just convert the image to XOD as you mentioned, and then load the XOD. This works fine, until I try to programmatically add some annotations.

 

When using PDF files, we have to do a simple unit conversion from 72 DPI to 96 DPI in order for the annotations to show up in the right place and at the right size. I immediately noticed that using this simple formula does not work for images. Through experimenting on 2 different images, I was able to figure out what the scale values needed to be in order for the annotations to show up in the right places. Here is what I found.

 

For an 800x600 image, I need to scale all annotation coordinates and sizes by 1.02.

For a 2952x1936 image, I need to scale all annotation coordinates and sizes by 0.3148.

 

After playing with the numbers for a while, I recognized a pattern. Just using the width of the images, I can derive the correct scale value by doing the following formula:

 

8.5 / (ImageWidth / 96) = Correct Scale Value

 

Does this make any sense to you? I know that 96 is the DPI of the web viewer control. Also, when I look at the page info in the viewer control, the width is always 816, no matter how big the image is. 816/96 happens to be 8.5. I’m just trying to understand these relationships and make sense of them.

--------------

A:

 

We have a need to be able to load and add annotations to images. Getting the image to load in the reader control was pretty simple. We just convert the image to XOD as you mentioned, and then load the XOD. This works fine, until I try to programmatically add some annotations.

 

When using PDF files, we have to do a simple unit conversion from 72 DPI to 96 DPI in order for the annotations to show up in the right place and at the right size. I immediately noticed that using this simple formula does not work for images. Through experimenting on 2 different images, I was able to figure out what the scale values needed to be in order for the annotations to show up in the right places. Here is what I found.

 

For an 800x600 image, I need to scale all annotation coordinates and sizes by 1.02.

For a 2952x1936 image, I need to scale all annotation coordinates and sizes by 0.3148.

 

After playing with the numbers for a while, I recognized a pattern. Just using the width of the images, I can derive the correct scale value by doing the following formula:

 

8.5 / (ImageWidth / 96) = Correct Scale Value

 

Does this make any sense to you? I know that 96 is the DPI of the web viewer control. Also, when I look at the page info in the viewer control, the width is always 816, no matter how big the image is. 816/96 happens to be 8.5. I’m just trying to understand these relationships and make sense of them.

[agrav...@pdftron.com]

When images are converted to XOD directly, it tries to create a letter sized page first 8.5 in x 11in, then stretch the image to the page width and cut off any empty space left in the page to preserve the aspect ratio. 
So yes the 8.5 value that you observed is correct. (8.5 in * 96 DPI  = 816)
The best way to convert the image coordinates is converting it to a faction of the image width. i.e. a point (400,300) for an 800x600 image can be turned into (0.5,0.5)
Turning this point to annotations, would be (Page Width * 0.5, page Height * 0.5)