Display matrix/image of floats using HTML5 Canvas

I am looking for a way to use HTML5 canvas element to display an image of floats. Consider a grey scale image where values are not 8-bit nor 16-bit integers but are floats (or doubles). I would like to have a javascript/html5 solution to display the image inside the browser using a colormap. Additionally, I would like the user to be able to adjust interactively the minimum and maximum value.

This operation is quite common in scientific imaging software such as ImageJ but I haven't found a javascript/html5 solution. Pixastic seems to be in the right track for this but开发者_StackOverflow中文版 is more oriented to color image processing.

Any ideas, thanks in advance

I think I had the same need for work. First i would say that I don't offer a library solution but I tell you how I code this.

I choose to make the colormap canvas using canvas linear Gradient.

To apply this gradient on my picture, I simply calcul the min/max of value I need to represent, then I searched for each values what colors correspond considering my linear gradient.

My picture has been included in a canvas using drawImage.

Then I changed the color of each pixel using canvasPixel manipulation on data array.

For interactive move colormap I choose to use JqueryUi slider.

All of this is linked on my code and it was a bit long to do.

Well I added some more complicated stuff because user is able to modify the color of linearGradient using a colorPicker Jquery plugin but it's more or less what you want too ?

I hope I answer your question. Good luck.