jake · January 8, 2013 18:36
diff --git a/bigme.html b/bigme.html
 <!DOCTYPE HTML> 
 <html>
 <head>
    <title>8bit Bigme</title>
    <style type="text/css" media="screen"> 
        body {
            margin: 0;
            padding: 0;
            background: #ddd;
            text-align: center;
            overflow: hidden;
        }
        
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style> 
 </head>
 <body>
    <img id="img" style="display:none">
    
    <canvas id="canvas"></canvas>
    
    <script type="text/javascript">
        // resize algorithm ripped from here. thanks!
        // http://phrogz.net/tmp/canvas_image_zoom.html
        
        function get_dimensions() {
            var width, height;

            if (typeof window.innerWidth != 'undefined') {
                width  = window.innerWidth,
                height = window.innerHeight;
            } else if (
                typeof document.documentElement != 'undefined' &&
                typeof document.documentElement.clientWidth != 'undefined' &&
                document.documentElement.clientWidth != 0
            ) {
                width  = document.documentElement.clientWidth,
                height = document.documentElement.clientHeight;
            } else {
                width  = document.getElementsByTagName('body')[0].clientWidth,
                height = document.getElementsByTagName('body')[0].clientHeight;
            }
            
            return {
                'width': width,
                'height': height
            };
        }
        
        function scale(original) {
            var dimensions = get_dimensions();
            
            var zoom = 4;
            
            if (dimensions.width > dimensions.height) {
                zoom = Math.ceil(dimensions.width / original);
            } else {
                zoom = Math.ceil(dimensions.height / original);
            }
            
            document.getElementById('canvas').style.left = '-' + (((zoom * original) % dimensions.width) / 2) + 'px';
            document.getElementById('canvas').style.top = '-' + (((zoom * original) % dimensions.height) / 2) + 'px';
            
            var img = document.getElementById('img');
            
            var offtx = document.createElement('canvas').getContext('2d');
            offtx.drawImage(img, 0, 0);
            var img_data = offtx.getImageData(0, 0, img.width, img.height).data;
            
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            
            canvas.height = img.height * zoom;
            canvas.width  = img.width * zoom;
            
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (var x = 0; x < img.width; ++x) {
                for (var y = 0; y < img.height; ++y) {
                    var i = (y * img.width + x) * 4;
                    var r = img_data[i];
                    var g = img_data[i + 1];
                    var b = img_data[i + 2];
                    var a = img_data[i + 3];
                    context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
                    context.fillRect(x * zoom, y * zoom, zoom, zoom);
                }
            }
        }
        
        var original = 64;
        var blog = 'topherchris.com';
        if (document.location.hash.length > 2) blog = document.location.hash.replace('#', '');
        
        document.getElementById('img').src = 'http://api.tumblr.com/v2/blog/' + blog + '/avatar/' + original;
        
        window.onload = function(){
            scale(original);
        }
        
        window.onresize = function(){
            scale(original);
        }
    </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>8bit Bigme</title>
	<style type="text/css" media="screen">
	body {
	margin: 0;
	padding: 0;
	background: #ddd;
	text-align: center;
	overflow: hidden;
	}

	#canvas {
	position: absolute;
	top: 0;
	left: 0;
	}
	</style>
	</head>
	<body>
	<img id="img" style="display:none">

	<canvas id="canvas"></canvas>

	<script type="text/javascript">
	// resize algorithm ripped from here. thanks!
	// http://phrogz.net/tmp/canvas_image_zoom.html

	function get_dimensions() {
	var width, height;

	if (typeof window.innerWidth != 'undefined') {
	width = window.innerWidth,
	height = window.innerHeight;
	} else if (
	typeof document.documentElement != 'undefined' &&
	typeof document.documentElement.clientWidth != 'undefined' &&
	document.documentElement.clientWidth != 0
	) {
	width = document.documentElement.clientWidth,
	height = document.documentElement.clientHeight;
	} else {
	width = document.getElementsByTagName('body')[0].clientWidth,
	height = document.getElementsByTagName('body')[0].clientHeight;
	}

	return {
	'width': width,
	'height': height
	};
	}

	function scale(original) {
	var dimensions = get_dimensions();

	var zoom = 4;

	if (dimensions.width > dimensions.height) {
	zoom = Math.ceil(dimensions.width / original);
	} else {
	zoom = Math.ceil(dimensions.height / original);
	}

	document.getElementById('canvas').style.left = '-' + (((zoom * original) % dimensions.width) / 2) + 'px';
	document.getElementById('canvas').style.top = '-' + (((zoom * original) % dimensions.height) / 2) + 'px';

	var img = document.getElementById('img');

	var offtx = document.createElement('canvas').getContext('2d');
	offtx.drawImage(img, 0, 0);
	var img_data = offtx.getImageData(0, 0, img.width, img.height).data;

	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	canvas.height = img.height * zoom;
	canvas.width = img.width * zoom;

	context.clearRect(0, 0, canvas.width, canvas.height);
	for (var x = 0; x < img.width; ++x) {
	for (var y = 0; y < img.height; ++y) {
	var i = (y * img.width + x) * 4;
	var r = img_data[i];
	var g = img_data[i + 1];
	var b = img_data[i + 2];
	var a = img_data[i + 3];
	context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
	context.fillRect(x * zoom, y * zoom, zoom, zoom);
	}
	}
	}

	var original = 64;
	var blog = 'topherchris.com';
	if (document.location.hash.length > 2) blog = document.location.hash.replace('#', '');

	document.getElementById('img').src = 'http://api.tumblr.com/v2/blog/' + blog + '/avatar/' + original;

	window.onload = function(){
	scale(original);
	}

	window.onresize = function(){
	scale(original);
	}
	</script>
	</body>
	</html>