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?
Asked
Active
Viewed 1.1k times
4
-
2You could try setting the `
` src to `data:img/x-tiff;base64,` followed by the base64 encoded string – Explosion Pills May 01 '13 at 00:04
-
what type of variable is it in? – dandavis May 01 '13 at 01:01
-
Hi, it is a string variable. I tried the following: valueToDisplay = '
'; This didn't seem to work. I'm not much of a javascript or html programmer so not clear what I could be doing wrong. – user1364297 May 02 '13 at 12:47
1 Answers
3
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:
- Source image downloaded as Binary Data using XMLHttpRequest with MimeType('text/plain; charset=x-user-defined'); (future: HTML5 Canvas ImageData)
- Imageprocessing using Tiffus
- 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!
GitaarLAB
- 14,536
- 11
- 60
- 80