Imagining CVS, JSON and HTML5 Canvas

Compressed value storage (CVS) applies lossless compression to a matrix resulting to storage that can be smaller than the popular compressed matrix formats like CRS and CCS. In Visualizing Compressed Value Storage (CVS), I described an imagination of using CVS to store and render images. The overall idea is simple. In fact, it's so simple that it seems possible to implement the idea using JSON and HTML5 canvas.

The assumption is that images are actually matrices, which entries contain each pixel's RGBA information. The following steps can be drawn out to save an image in the suggested format:

1. Statistics - identify the prominent or most redundant RGBA value to be designated as the matrix's "0". This allows the algorithm to "generate" a sparse matrix out of the image's dense matrix.
2. Compression - compress the "generated" sparse matrix in CVS format.
3. Analysis - identify and apply the best linear indexing mode (row- or column- major order) that can offer the best possible compression of the "generated" sparse matrix.
4. Save - serialize the CVS instance in JSON format and save to file. As suggested, the parser should include algorithm to specially format/shorten sequential ranges in LinearIndex to ###-### format. Saving should also include the image's size and the "designated 0".

Given the image file from above, a parser can then be created to load and render the image to an HTML5 canvas. HTML5 canvas supports RGBA data to render images pixel per pixel so it's an easy candidate for this exercise.

1. Load and parse out the parts of the file to get the image size, to de-serialize the JSON data to CVS and to get the designated 0.
2. Set the HTML5 canvas to the image size.
3. Render the CVS data to the canvas.
4. Render the designated 0 to the canvas.

Looks easy right? Now, I wonder how it will actually look like when coded... Any takers? Anyone? Just say "challenge accepted" and you got it! ;-)