Is there an HTML5 method for displaying a tiff image data already loaded into memory

10,201

Native browser-support for tiff files is still pretty bad.
Wikipedia has a nice overview on browsers Image format support.

That being said; since a .tiff image is still essentially a raster-image, one could indeed convert it (the tricky part is stuff like supporting different compression-algorithms like PACKBITS, DEFLATE, LZW, etc) to another (browser-supported) raster-format (so one could feed it as a data:img-source).

There is a library called Tiffus: a client side pure Javascript imaging library to load, save and manipulate binary images.

The original project aim was was to create a plain Javascript chrome extension which can convert single/multi page TIFF image/s to BMP/GIF image (this is where the name came from).

However now it supports:

  • Windows BMP (no compression, RLE)
  • OS/2 BMP
  • ICO
  • GIF
  • JPEG
  • PNG
  • TIFF

and currently supports the folloing image functions:

  • load
  • save
  • resize
  • flip
  • invert color

Basically it works like this:

  1. Source image downloaded as Binary Data using XMLHttpRequest with MimeType('text/plain; charset=x-user-defined'); (future: HTML5 Canvas ImageData)
  2. Imageprocessing using Tiffus
  3. Desination image shown as Data URI scheme (future: HTML5 Canvas ImageData)

Note that according to the above; the author expects to use HTML5 Canvas ImageData in the future.

Hope this helps!

Share:
10,201
user1364297
Author by

user1364297

Updated on June 04, 2022

Comments

  • user1364297
    user1364297 almost 2 years

    I have a tiff image stored in memory (in a javascript variable). What is the javascript or html technique for displaying this image in the browser window? Is there a "drawimage" type of function?