Skip to content

Instantly share code, notes, and snippets.

@jake

jake/bigme.html

Created January 8, 2013 18:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jake/4486587 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jake/4486587 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jacob Bijani created this gist Jan 8, 2013.
    109 changes: 109 additions & 0 deletions bigme.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    <!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>