javascript如何调整调整图片大小，裁剪代码实例详解

// 用法 <img src="this_image_path.jpg" onload="DrawImage(this,450,450);" />
 function DrawImage(ImgD,FitWidth,FitHeight){
 var image=new Image();
 image.src=ImgD.src;
 if(image.width>0 && image.height>0){
 if(image.width/image.height>= FitWidth/FitHeight){
 if(image.width>FitWidth){
 ImgD.width=FitWidth;
 ImgD.height=(image.height*FitWidth)/image.width;
 }else{
 ImgD.width=image.width;
 ImgD.height=image.height;
 }
 } else{
 if(image.height>FitHeight){
 ImgD.height=FitHeight;
 ImgD.width=(image.width*FitHeight)/image.height;
 }else{
 ImgD.width=image.width;
 ImgD.height=image.height;
 }
 }
 }
 }

通过 overflow：hidden进行剪切：

function clipImage(o, w, h){
 var img = new Image();
 img.src = o.src;
 if(img.width >0 && img.height>0)
 {
 if(img.width/img.height >= w/h)
 {
 if(img.width > w)
 { 
 o.width = (img.width*h)/img.height;
 o.height = h;
 //o.setAttribute("style", "marginLeft:-" + ((o.width-w)/2).toString() + "px");
 $(o).css("margin-left", "-"+((o.width-w)/2).toString() + "px");
 }
 else
 {
 o.width = img.width;
 o.height = img.height;
 } 
 }
 else
 {
 if(img.height > h)
 {
 o.height = (img.height*w)/img.width;
 o.width = w;
 //o.setAttribute("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
 //$(o).css("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
 $(o).css("margin-top", "-"+((o.height-h)/2).toString() + "px");
 }
 else
 {
 o.width = img.width;
 o.height = img.height;
 } 
 }
 }
}

实例：

<style type="text/css">
 ul{list-style:none;}
 ul li{float:left;padding:1px;border:#ccc 1px solid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;}
</style>
<ul>
 <li><img src="1.jpg" onload="DrawImage(this,120,120);" /></li>
 <li><img src="2.jpg" onload="clipImage(this,120,120);" /></li>
</ul>