JSON to PNG

index.html

<!-- copy of http://jsfiddle.net/SzPMj/7/ found via http://www.devnetwork.net/viewtopic.php?f=50&t=133566 -->
<style>
body{
    padding:50px;
}
canvas,img{
    zoom:2000%;
}
</style>

<img src = "" id = "rendered" />
<div id = "output">test</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
/* Variable to encode */
var data = {
    route:{
        from:{
            x:100,
            y:208
        },
        to:{
            x:95,
            y:68
        },
        test:{
            x:95,
            y:68
        }
    }
};

$(document).ready(function(){
    var src = dataToImage(data);
        
    /* Store as image */
    $("#rendered").attr('src',src);
    
    /* read back out from an image */
    imageToData($("#rendered").attr('src'),function(ascii){
        $("#output").text(ascii);
    });
    
});


/* data = any Javascript variable
Returns: base64 encoded png data to use as a data url
*/
function dataToImage(data)
{
    var canvas = $("<canvas></canvas")[0],
        stringed = JSON.stringify(data),
        hex = ascii2hex(stringed),
        rgb = hex2rgb(hex),
        imageData = rgb2imagedata(rgb,canvas);
    
    canvas.getContext("2d").putImageData(imageData,0,0);
    return canvas.toDataURL("image/png")
}

/* src = a data url
   callback = function to call when image is loaded
*/
function imageToData(src,callback)
{
    var canvas = $("<canvas></canvas")[0],
        ctx = canvas.getContext("2d"),
        img = new Image();
    
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
        
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
        
        var rgb = imagedata2rgb(imageData),
            hex = rgb2hex(rgb),
            ascii = hex2ascii(hex);
           
           callback(ascii);
    };
    img.src = src;
}

/* converts an ascii string to a hex string */
function ascii2hex(ascii) {
    var hex = '';
    for (var i = 0; i < ascii.length; i++)
        hex += ascii.charCodeAt(i).toString(16);
    return hex;
}

/* converts a hex string to an ascii string */
function hex2ascii(hex){
    var ascii = '';
    
    for (var i = 0; i < hex.length; i += 2)
    {
        ascii += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    }
    return ascii;
}

/* converts a hex string to an array of colour objects, each with
       "r", "g", "b" properties
*/
function hex2rgb(hex)
{
    var rgb = [];
    for(var i = 0; i <= hex.length - 6; i += 6)
    {
        var colour = {
            r:parseInt(hex.substr(i+0,2),16),
            g:parseInt(hex.substr(i+2,2),16),
            b:parseInt(hex.substr(i+4,2),16)
        };
        rgb[rgb.length] = colour;
    }
    
    return rgb;
}

/* converts an array of rgb colour objects to a hex string */
function rgb2hex(rgb)
{
    var hex = '';
    
    for(var i in rgb)
    {
        hex += rgb[i].r.toString(16) +
               rgb[i].g.toString(16) +
               rgb[i].b.toString(16);
    }

    return hex;
}

/* rgb = array of colour objects with "r", "g", and "b" properties
   canvas = the canvas element to write to
*/
function rgb2imagedata(rgb,canvas){
    
    // hex has sets of 6 digits identifying a colour. To make a square graphic, 
    // find the square root and ceil() it to ensure it's big enough to hold all the data
    var dim = Math.ceil(Math.sqrt(rgb.length)),
        imageData = canvas.getContext("2d").createImageData(dim,dim);
    
    canvas.width = dim;
    canvas.height = dim;
    
    /* Set pixel values */
    for(var i in rgb)
    {
        var colour = rgb[i],
            img_index = i*4;
        imageData.data[img_index + 0] = colour.r;
        imageData.data[img_index + 1] = colour.g;
        imageData.data[img_index + 2] = colour.b;
        imageData.data[img_index + 3] = 255;//alpha
    }
    
    return imageData;
}

/* converts an imagedata object to an array of rgb colour objects */
function imagedata2rgb(imagedata)
{
    var r = g = b = a = 0,
        rgb = [],
        data = imagedata.data
    
    for(var i = 0; i <= data.length-4; i+=4)
    {
        r = data[i + 0];
        g = data[i + 1];
        b = data[i + 2];
        a = data[i + 3];
        
        /* valid values have an alpha of 1, 0 means no data */
        if(a == 0)
            break;
        
        rgb[rgb.length] = {
            r:r,
            g:g,
            b:b
        };
    }
    return rgb;
}
</script>