Makes an image out of the content of a webpage

pic-of-a-page

javascript:(function () {
    var d = document.createElement('canvas'),
        ctx = d.getContext('2d'),
        w = window.innerWidth,
        h = window.innerHeight,
        x = 0,
        code_to_0256 = function (code) {

           if (code < 32 || code > 127) {
               code = 90;
           }
           return Math.floor((code - 32) * (256/95));
        },
        imageData, imData, text;
  
    d.setAttribute("style", "width: " + w + "px; height: " + h +"px;display: block;");
    document.body.insertBefore(d, document.body.firstChild);
  
    imageData = ctx.getImageData(0, 0, w, h);
    imData = imageData.data;
        
    text = document.body.textContent;
  
  while (x < imData.length ){
     imData[x]= code_to_0256(text.charCodeAt(x % text.length));
     x++;
    
  }
  ctx.putImageData(imageData, 0, 0);
  
    
}());

What it's doing

It makes an html <canvas> element and writes pixel data to it. Each pixel comprises four characters, one for red, one for blue, one for green, one for opacity.

So it goes through the markup of the webpage (inside the body element), and gets the character code (charCodeAt) for the current letter, and then makes sure it's within the range 0-256 (% 256) for rgb values.

(It's actually a bit more complicated than that because it looks at the next two letters as well, which was just me playing with different things, it's probably not necessary.

So for the string "abcd" it will convert the "a" to 97, "b" to 98, "c" to 99, "d" to 100, and make the first pixel from this, coloured rbga(97,98,99,100) - just about grey.

A better algorithm should probably translate to the colour range a bit better so you get more interesting images. Let me try that now...

Update

OK, that's better I think. Now it assumes most characters will be in the ASCII range 32 to 127 (and sets it to 90 if not), and then scales it to fill the range 0 - 256.

Also, not using the markup now, just the textContent.

For Twitter

Here's a similar thing that tries to inject the image just below a tweet. Add it as a bookmark, click on a Tweet, and maybe, just maybe, it'll manage to put a little image in the right place.

https://gist.github.com/mattparker/e80b103fe59a9aab7483