JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body{
    padding:50px;
}
canvas,img{
    zoom:2000%;
}

JavaScript

/* 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),...