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

To use

As is stands, it works on the markup of a webpage (ie tags and text content). To use it, copy the code and paste it into the location of a bookmark on your browser. Visit a webpage you want to piccify and the click on the bookmark. It'll stick the image in at the top - you can then save as or whatever.

Or

Open up a developer toolbar, copy and paste (without the javascript: at the start) and 'run' it. Details vary by browser - Chrome is Ctrl - shift - j to get the developer toolbar; then you need to find the console.

To use specific text.

The text used is in line 15 above. You need to change that if you want specific text. It'll be much easier if it's on a webpage already. For example, to do a picture just of the first post on your blog, you could change it to

text = document.getElementById("post-408").textContent;

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