Display, Get Properties, and Re-size an Image

by Mike Rawling

HTML

<form class='frmUpload'>
      <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
	</form>

    <canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
	<div id='allImgProperties' style="display:inline"></div>
	
	<div id='imgTwoForJPG'></div>

JavaScript

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

	var allObjtProperties = '';
	for (objProprty in frmData) {
		console.log(objProprty + " : " + frmData[objProprty]);
		allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
	};
	
	document.getElementById('allImgProperties').innerHTML = allObjtProperties;
	
	var cnvs=document.getElementById("cnvsForFormat");
	console.log("cnvs: " + cnvs);
    var ctx=cnvs.getContext("2d");

    var img = new Image;
    img.src = URL.createObjectURL(frmData);
	
	console.log('img: ' + img);
	
    img.onload = function() {
	  var picWidth = this.width;
	  var picHeight = this.height;
	  
	  var wdthHghtRatio = picHeight/picWidth;
	  console.log('wdthHghtRatio: ' + wdthHghtRatio);
	  
	  if (Number(picWidth) > 400) {
		var newHeight = Math.round(Number(400) * wdthHghtRatio);
	  } else {
		return false;
	  };
		
		document.getElementById('cnvsForFormat').height = newHeight;
		console.log('width: 400  h: ' + newHeight);
		//You must change the width and height settings in order to decrease the image size, but
		//it needs to be proportional to the original dimensions.
		console.log('This is BEFORE the DRAW IMAGE');
        ctx.drawImage(img,0,0, 400, newHeight);
		
		console.log('THIS IS AFTER THE DRAW IMAGE!');
	
		//Even if original image is jpeg, getting data out of the canvas will default to png if not specified
		var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
		//The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
		document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
	};
 };