var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var maxW=700;
var maxH=700;

var input = document.getElementById('input');
var output = document.getElementById('file_output');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
  var img = new Image;
  img.onload = function() {
    var iw=img.width;
    var ih=img.height;
    var scale=Math.min((maxW/iw),(maxH/ih));
    var iwScaled=iw*scale;
    var ihScaled=ih*scale;
    canvas.width=iwScaled;
    canvas.height=ihScaled;
    ctx.drawImage(img,0,0,iwScaled,ihScaled);
output.value = canvas.toDataURL("image/jpeg",0.5);
  }
  img.src = URL.createObjectURL(e.target.files[0]);
}
