1K thumbnail generator

Original: http://jsfiddle.net/codepo8/N5hBm/

by Jens Grochtdreis

HTML

<!-- 
/*
  1k thumb love by Christian Heilmann
  Version: 1.0
  Copyright (c) 2012, Christian Heilmann
  Code licensed under the BSD License:
  http://wait-till-i.com/license.txt
*/
var d = document,
b = document.body;
b.style.width = b.style.height = '100%';
c = d.createElement( 'canvas' );
cx = c.getContext( '2d' );
b.innerHTML = 'drag photos here';
/* prevent normal dragover */
d.addEventListener( 'dragover', function( evt ) {
  evt.preventDefault();
},false);
/* on drop, get files */
d.addEventListener( 'drop', function( ev ) {
  var files = ev.dataTransfer.files;
  if ( files.length > 0 ) {
    /* loop over files */
    var i = files.length;
    while ( i-- ) {
      file = files[i];
      /* If the file is an image, read it */
      if ( file.type.indexOf( 'image' ) === -1) { continue; }
      var reader = new FileReader();
      reader.readAsDataURL( file );
      reader.onload = function( ev ) {

/* Create an image and reload it once it is there */
        var img = new Image();
        img.src = ev.target.result;
        img.onload = function() {
          c.width = c.height = 100;
          var w = this.width,
              h = this.height,
              x = 0, 
              y = 0,
              wr = w / 100,
              hr = h / 100,
              mr = Math.max( wr, hr );
          if (mr > 1 ) {
            w = w / mr;
            h = h / mr;
          } 
          x = ( 100 - w ) / 2;
          y = ( 100 - h ) / 2;
/* use canvas to create the thumbnail data */
          cx.drawImage( img, x ,y ,w ,h );
/* Create a thumbnail image and add it to the page  */
          b.innerHTML += '<img src="' + c.toDataURL() + '">';
        }
      }
    }
  }
  ev.preventDefault();
},false);
-->

JavaScript

var d=document,b=document.body;b.style.width=b.style.height='100%';c=d.createElement('canvas');cx=c.getContext('2d');b.innerHTML='drag photos here';d.addEventListener('dragover',function(evt){evt.preventDefault();},false);d.addEventListener('drop',function(ev){var files=ev.dataTransfer.files;if(files.length>0){var i=files.length;while(i--){file=files[i];if(file.type.indexOf('image')===-1){continue;}
var reader=new FileReader();reader.readAsDataURL(file);reader.onload=function(ev){var img=new Image();img.src=ev.target.result;img.onload=function(){c.width=c.height=100;var w=this.width,h=this.height,x=0,y=0,wr=w/100,hr=h/100,mr=Math.max(wr,hr);if(mr>1){w=w/mr;h=h/mr;}
x=(100-w)/2;y=(100-h)/2;cx.drawImage(img,x,y,w,h);b.innerHTML+='<img src="'+c.toDataURL()+'">';};};}}ev.preventDefault();},false);