How to draw high-resolution images on client-side?

Question

Any libraries, API, or tips are welcome. I am trying to draw Landsat 8 images using Canvas utility of Javascript on my browser. The grayscale reflectance values for Landsat 8 bands are from minimum -32768 and maximum +32767(int16). The Canvas utility offers RGBA for range 0-255. If I scale (-32768, 32767) range to (0,255), I am essentially missing the point of Landsat satellite taking good detailed pictures.

Answer 1

First, that is not "high-resolution" but "high-range". Resolution is about width and height. Not about bits per color.

You are basically looking for conversion from High Dynamic Range to Small Dynamic Range, which is called Tone Mapping. The problem is, it is always loosy conversion and might not be useful for your case.

Another, simpler option is to have user select what original range they want to display. Or even select colors at specific original values and blend between those. This way, user can choose either by displaying whole range, while loosing details at small range and then "zoom in" to range that interests them the most.

Answer 2

There is a reason for computation to happen outside browser. If it is too much to be infeasible on a browser, try do the computation on a cloud machine and send the results through HTTP.

The browser-side can perform computation at a lower spatial resolution, instead of lowering numerical precision.

Also, you can give users the choice of dynamic range compression (a monotonic mapping function of amplitudes) which reduces the numerical precision but still extracts a range that is useful based on the user's analytical needs.

Answer 3

Draw to an image format rather than canvas and then present the image.

Png suports 32 and 64 bit colour and you can output base64 encoded data strings to the browser to avoid having the save as a file

http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/