Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards “genius bordering on the bat-sh*t-crazy” touch that make you shake your head in disbelief when they come out but later on become very interesting.
One of his posts from 2008 entitled “Compression using Canvas and PNG-embedded data” had a good idea: if you want to compress JavaScript and CSS you could reverse engineer a packing algorithm in JavaScript or you could use a lossless packing system that is already in use and supported in browsers. In this case the packed format is PNG and the way to unpack it is by using the canvas API’s getImageData() method:
var o = new Image();
o.onload = function() {
var s = “”,
c = d.createElement(“canvas”),
t = c.getContext(“2d”),
w = o.width,
h = o.height;
c.width = c.style.width = w;
c.height = c.style.height = h;
t.drawImage(o, 0, 0);
var b = t.getImageData( 0, 0, w, h ).data; //b : bucket of data
for(var i= 0; i <b.length; i += 4) {
if( b[i]> 0 )
s += String.fromCharCode(b[i]);
}
m(s, ix);
}
o.src = z;
}
As there are quite some interesting competitions going on that need really small JavaScript solutions Alex Le took up Jacob’s work and wrapped it in a build script that concatenates, packs and converts to a PNG and unpacks it for the 10K competition with a JavaScript. In the process Alex also found some bug in Internet Explorer 9′s canvas implementation as it only reads the first 8192 bytes of a PNG and returns 0 for the others :(.
It is pretty amazing how efficient this way of packing is. What we need to test now is when and if it is worth while to have the unpacking done on the client. Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request. Let the games begin.
