Displaying TIFF with tiff.js and HTML5 Canvas

https://medium.com/@thad.humphries/displaying-tiff-with-tiff-js-and-html5-canvas-dd02fe9f1a5d

A 300dpi TIFF Group 4 image decompressed with tiff.js and displayed at 30% in an HTML5 Canvas

I deal with a lot of TIFF images, especially 1-bit with Group 4 Compression. Most of these images are letter and legal size, scanned at 200dpi to 300dpi, which is fairly standard for business documents.

Of course TIFF is not a standard image format for web browsers, so displaying these images in the web has been a pain (remember the Java <applet>? ugh!). From my observations, PNGs are 50% larger, and, before PNGs were widely supported, there was GIF, more than twice a large. You can see the different sizes produced with ImageMagick’s convert:

$ ls -l
total 2056
-rw-r--r--  1 thad  staff  130262 May  6 15:16 kofax.gif
-rw-r--r--  1 thad  staff  772436 May  6 15:46 kofax.jpg
-rw-r--r--  1 thad  staff   87036 May  6 15:12 kofax.png
-rw-r--r--  1 thad  staff   57222 Apr 30 17:59 kofax.tif

I have been delighted to stumble on tiff.js, a port of LibTIFF made by compiling the LibTIFF C code with Emscripten. (To me, this solution is nothing short of genius and/or magic).

Now for displaying the image. On first viewing, I want to reduce the image to fit in the bowser window. However doing so with an HTML5 Canvas gave me a jagged image. Twitter to the rescue! Miles Elam (@mileselam) explained that I should increase the size of my <canvas> and reduce its display with style settings. The result is a smooth representation of my TIFF image (shown above at 30% its size).

The source code for this demo may be found on GitHub.