How to develop a TIFF file viewer for Chromium type browsers?

Browsers do not natively display TIFF files like they do JPEG or PNG. The typical solution is:

1. Fetch TIFF data into memory.

2. Decode TIFF in JavaScript or WebAssembly.

3. Render pages onto an HTML5 Canvas.

4. Never write the file to local storage or a temp directory.

Load TIFF into Memory

const response = await fetch("/api/document/123");
const buffer = await response.arrayBuffer();

const ifds = UTIF.decode(buffer);
UTIF.decodeImages(buffer, ifds);

const firstPage = ifds[0];

const rgba = UTIF.toRGBA8(firstPage);

const canvas = document.getElementById("viewer");
canvas.width = firstPage.width;
canvas.height = firstPage.height;

const ctx = canvas.getContext("2d");

const imageData = ctx.createImageData(
    firstPage.width,
    firstPage.height
);

imageData.data.set(rgba);
ctx.putImageData(imageData, 0, 0);

Multipage TIFF Support

Government and enterprise document systems frequently use multipage TIFFs.

const ifds = UTIF.decode(buffer);

for (let i = 0; i < ifds.length; i++) {
    UTIF.decodeImage(buffer, ifds[i]);

    const page = ifds[i];
    const rgba = UTIF.toRGBA8(page);

    renderPage(rgba);
}

Here's the simple way to do it:

The trick: Chromium browsers don't natively support TIFF, so you need to decode it in memory using JavaScript.

Steps:

1. Load the TIFF into memory (not disk)

   • Use FileReader.readAsArrayBuffer() for local files

   • Use fetch().arrayBuffer() for remote files

2. Decode using tiff.js (a JavaScript port of libtiff)

   javascript

   const tiff = new Tiff({buffer: arrayBuffer});
   const canvas = tiff.toCanvas();
   document.body.appendChild(canvas);

3. That's it – no temp files, no disk writes. Everything stays in RAM.

Complete working example:

html

Libraries that work:

• tiff.js – Most popular, handles multi-page

• geotiff.js – For large geospatial TIFFs

• ImageScript – Modern WebAssembly alternative

No server needed. No disk writes. Pure browser memory.