yurikoval/index.html

## index.html
<html>
  <body>
    <img src="http://i.imgur.com/0jWrSmF.jpg" width="300" height="234">
    <canvas id="canvas" width=50></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      img = new Image();
      img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';
      img.onload = function () {

          canvas.height = canvas.width * (img.height / img.width);
          var oc = document.createElement('canvas'),
              octx = oc.getContext('2d');

          oc.width = img.width * 0.5;
          oc.height = img.height * 0.5;
          octx.drawImage(img, 0, 0, oc.width, oc.height);
          octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
          ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, canvas.width, canvas.height);

          var string = "";
          var uint8Data = ctx.getImageData(0,0,canvas.width,canvas.height).data;
          var data = Array.prototype.slice.call(uint8Data);
          var properties = [];
          for (i=0;i < data.length;i = i+4) {
            if ( ((i / 4) % canvas.width == 0) && i > 0) {
              string = string + "\n";
            }
            string = string + "%c\u25A0";
            rgba = data.slice(i,i + 4);
            properties.push("color:rgba(" + rgba.join(',') +");line-height:0px;font-size:20px;");
          }
          properties.unshift(string);
          console.log.apply(console, properties);
      }
      img.src = "http://i.imgur.com/0jWrSmF.jpg";
    </script>
  </body>
</html>
	<html>
	<body>
	<img src="http://i.imgur.com/0jWrSmF.jpg" width="300" height="234">
	<canvas id="canvas" width=50></canvas>
	<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	img = new Image();
	img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';
	img.onload = function () {

	canvas.height = canvas.width * (img.height / img.width);
	var oc = document.createElement('canvas'),
	octx = oc.getContext('2d');

	oc.width = img.width * 0.5;
	oc.height = img.height * 0.5;
	octx.drawImage(img, 0, 0, oc.width, oc.height);
	octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
	ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, canvas.width, canvas.height);

	var string = "";
	var uint8Data = ctx.getImageData(0,0,canvas.width,canvas.height).data;
	var data = Array.prototype.slice.call(uint8Data);
	var properties = [];
	for (i=0;i < data.length;i = i+4) {
	if ( ((i / 4) % canvas.width == 0) && i > 0) {
	string = string + "\n";
	}
	string = string + "%c\u25A0";
	rgba = data.slice(i,i + 4);
	properties.push("color:rgba(" + rgba.join(',') +");line-height:0px;font-size:20px;");
	}
	properties.unshift(string);
	console.log.apply(console, properties);
	}
	img.src = "http://i.imgur.com/0jWrSmF.jpg";
	</script>
	</body>
	</html>