tiffnail-and-i

React component to create and render thumbnails of TIFF format images within a web browser.

Background

Browser support for rendering TIFF format images is extremely poor:

https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

This project provides a react component that leverages tiff.js to create a cross browser solution for rendering TIFF format images within the web browser.

Impementation Details

Internally the component:

1. takes TIFF image data as a base64 encoded string and converts it to an arraybuffer such that it can be consumed by the tiff.js library
2. invokes tiff.js with the arraybuffer to create a canvas object
3. invokes the toDataURL method on the canvas object to create a data URI containing a PNG format representation of the image
4. creates an image tag with src set to be the dataURL

Usage

<Tiffnail bytes={bytes}/>

Where bytes is a base64 encoded string holding the tiff image data. Please refer to the example directory for a complete working example react app that uses this component.

Running the example app

After you have cloned the repository run the following commands in the root of the project:

npm i

npm run build

npm link

Then in the example directory run the following commands:

npm link tiffnail-and-i

npm start