Is there an HTML5 method for displaying a tiff ima

2019-02-18 14:56发布

问题:

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?

回答1:

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!