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);
  
    
}());

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