// noprotect

​

var width = 324;

​

​

function resize(img, w, h) {

  var sW = img.width;

  var sH = img.height;

  var x = 2;

  while (sW > w) {

    sW = Math.round(sW / x);

    sH = Math.round(sH / x);

    if (sW < w) {

      sW = w;

      sH = h;

    }

    canvas = document.createElement('canvas');

    canvas.width = sW;

    canvas.height = sH;

    canvas.getContext('2d').drawImage(img, 0, 0, sW, sH);

    img = canvas;

  }

  return img;

}

​

​

function imageLoader(src) {

  var df = $.Deferred();

  var img = new Image();

  img.onload = function() {

    df.resolve(img);

  };

  img.onerror = function() {

    df.reject(img);

  };

  img.src = src;

  return df.promise();

}

​

​

$('#file').on('change', function() {

  var images = $.map($('#file').prop('files'), function(file) {

    return imageLoader(URL.createObjectURL(file));

  });

  $.when.apply(null, images).done(function() {

    $.each(arguments, function(i, img) {

      var height = Math.round(width * img.height / img.width);

​

      canvas = resize(img, width, height);

      $(img).attr({width: width, height: height});

      $('body').append(

        $("<p/>").append(

          [img, canvas]

        )

      );

    });

  });

});

​