Image Resizer javascript

Image Resizer javascript

HTML

<div> Actual vs Result - Proportoinal Resize of 215x217</div>
<div class="firstDiv">
<img id="sample" src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg" width="215" height="217" />

<img id="myImg" src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg" onLoad="resizeImage(this)"/>
</div>

<div > Actual vs Result - Clip Resize of 215x217 </div>
<div class="secondDiv">
<img id="sample2" src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg" width="215" height="217"/>
<img id="clipImage" src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg" onLoad="clipImg(this)"/>
</div>

CSS

img{
	position: absolute;
}
#myImg{
	left: 300px;
}
#clipImage{
	left: 300px;
}
.firstDiv{
	position: relative;
	height: 217px;
	
}
.secondDiv{
	position: relative;
	
}

JavaScript

////
// Subash selvaraj 2013
// http://subashflash.blogspot.in/
// https://github.com/sesubash/Javascript-Image-Resizer
// targetwidth and targetheight are the dimensions of the rendering area
var ImageResizer= {

// clipping will work only in html5 supported browsers
clipImage:function (img, targetwidth, targetheight) {

          var srcwidth = $(img).width();
          var srcheight = $(img).height();

          var result = this.calculateHeightAndWidth(srcwidth, srcheight, targetwidth, targetheight);

          var left = Math.abs(result.targetleft);
          var top = Math.abs(result.targettop);

          $(img).css("width",result.width);
          $(img).css("height",result.height);
          $(img).css("clip","rect("+top+"px,"+(targetwidth+left)+"px,"+(targetheight+top)+"px,"+left+"px)");
          $(img).css("left","-=" + left + 'px');
          $(img).css("top","-=" + top + 'px');
      

   
},

 fixImage:function(img, targetwidth, targetheight) {

    var srcwidth = $(img).width();
    var srcheight = $(img).height();

    var result = this.calculateHeightAndWidth(srcwidth, srcheight, targetwidth, targetheight);

    var left = 0;//Math.abs(result.targetleft);
    var top = 0;//Math.abs(result.targettop);

    if (result.width > targetwidth) {
        $(img).css("width", targetwidth);
        $(img).css("height", "auto");
    }
    else {

        console.log("left" + $(img).css("left"));
        $(img).css("width", "auto");
        $(img).css("height", targetheight);
        var left = targetwidth - img.width;
        $(img).css("left", "+=" + (left / 2) + 'px');       
    }
   
},

 
// The result object returned has the following properties:
//     width: width to scale the image to
//     height: height to scale the image to
//     targetleft: position relative to the left edge of the target to center the image (can be negative when fLetterBox is false)
//     targettop: position relative to the top edge of the target to center the image (can be...