var input = document.getElementById("input");

​

// Wait for input

input.addEventListener("change", function(e) {

  var file = e.target.files[0];

  // Only process image files.

  if (!file.type.match('image.*')) {

    return;

  }

  // Create image from file (blob)

  var img = new Image();

  img.src = URL.createObjectURL(file);

  img.onload = function() {

    var maxHeight = 200,

        maxWidth = 300,

        origRatio = img.height / img.width,

        newWidth = maxWidth,

        newHeight = maxHeight;

    if(origRatio > 1) {

      // Height > Width

      newWidth = (img.width / img.height) * newHeight;

    } else if(origRatio < 1) {

      // Width > Height

      newHeight = (img.height / img.width) * newWidth;

    } else {

      // Width = Height

    }

    var scaleHeight = newHeight / img.height,

        scaleWidth = newWidth / img.width;

    // Create canvas with img's height and width

    var canvas = document.createElement("canvas");

    canvas.height = newHeight;

    canvas.width = newWidth;

    var ctx = canvas.getContext("2d");

    //ctx.scale(scaleWidth, scaleHeight);

    ctx.transform(scaleWidth, 0, 0, scaleHeight, 0, 0);

    ctx.drawImage(img, 0, 0);

    document.body.appendChild(canvas);

  };

});