hi, as the title says, i want to resize and preview image before i submit it to my server. it is because of reducing load to my server and also give the client ability to crop the image too.

i am using imgareaselect for cropping. and also using a javascript to preview the image. until now this works well.

i wanted to resize the image before crop and upload, so i search a bit and found that i can use canvas for resizing while maintaining the ratio.

but after updated my code this does not works. i am new to javascript. i need your help.
my script

Code:
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">

function previewImage(input) {

    var preview = document.getElementById('preview');
	var preview_crop_thumb = document.getElementById('preview_crop_thumb');
	
    if (input.files && input.files[0]) {
	
	  var img = document.createElement("img");
      var reader = new FileReader();
	  
      reader.onload = function (e) {
	  img.src = e.target.result
      }
	  
      reader.readAsDataURL(input.files[0]);
	  var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      var MAX_WIDTH = 550;
      var MAX_HEIGHT = 550;
      var width = img.width;
	  var height = img.height;
	  
	  if (width > height) {
      if (width > MAX_WIDTH) {
      height *= MAX_WIDTH / width;
      width = MAX_WIDTH;
    }
    } else {
      if (height > MAX_HEIGHT) {
      width *= MAX_HEIGHT / height;
      height = MAX_HEIGHT;
    }
    }
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);
	  var dataurl = canvas.toDataURL("image/jpg");
	  
	  window.onload=function(){
		  
	  document.getElementById('preview').style.display='block';
      document.getElementById('preview_crop').style.display='block';
	  document.getElementById('image_crop_diolouge').style.display='block';
      preview.setAttribute('src', dataurl);
	  preview_crop_thumb.setAttribute('src', dataurl);  
	}
	  
	  
    } else {
	
	  document.getElementById('preview').style.display='none';
	  document.getElementById('preview_crop').style.display='none';
	  document.getElementById('image_crop_diolouge').style.display='none';
      preview.setAttribute('src', 'placeholder.png');
	  preview_crop_thumb.setAttribute('src', 'placeholder.png');
	  
    }
  }

</script>
<style>
.image_crop_diolouge{
    font-family: calibri;
	color:#7A7A7A;
	text-shadow:0px 1px 1px #BDBDBD;
	font-weight:bold;
    margin:10px; 
    background:#FFE974; 
	border:1px solid #FFB28E; 
	box-shadow:1px 1px 2px #666; 
	border-radius:1px; 
	max-width:800px;
	padding:10px; 
	}
#preview_crop{
    width: 200px; 
	height: 200px; 
	overflow: hidden; 
	float:right; 
	display:none; 
	margin:10px 20px 10px 0px; 
    }
#preview{
    width:550px; 
	height:550px; 
	display:none; 
	float:left;
	margin:10px 10px 10px 20px; 
    }	

</style>
<center>
<div style="max-width:800px; ">
<div class="image_crop_diolouge" id="image_crop_diolouge" style="display:none;">Press the left mouse button and drag to crop the image</div>
<img id="preview" src="placeholder.png"/>
<div id="preview_crop" >
<img id="preview_crop_thumb" src="placeholder.png" style="width: 200px;">
</div>
<div class="image_crop_diolouge">
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
</div>
<br/><br/>
</div>
</center>