现在的位置: 首页 > 综合 > 正文

js 可以控制图片的大小

2013年01月25日 ⁄ 综合 ⁄ 共 1656字 ⁄ 字号 评论关闭
js 可以控制图片的大小
<script language="javascript"> 
var flag=false;  
function DrawImage(ImgD){  
   var image=new Image(); 
   image.src=ImgD.src;  
   if(image.width>0 && image.height>0){  
    flag=true;  
    if(image.width/image.height>=500/400){  
     if(image.width>500){    
     ImgD.width=500;  
     ImgD.height=(image.height*500)/image.width;  
     }else{  
     ImgD.width=image.width;    
     ImgD.height=image.height;  
     }  
     }  
    else{  
     if(image.height>400){    
     ImgD.height=400;  
     ImgD.width=(image.width*400)/image.height;       
     }else{  
     ImgD.width=image.width;    
     ImgD.height=image.height;  
     }  
     }  
    }  
   }   
</script>
调用方式(img是显示图片的html代 ) <IMG  src= "temp.jpg" border=0  onload="javascript:DrawImage(this);">  

修改后:
<script language="javascript"> 
var flag=false;   //控制小图
function DrawImage(ImgD,maxwidth,maxheight){  
   var image=new Image(); 
   image.src=ImgD.src;  
   if(image.width>0 && image.height>0){  
    flag=true;  
    if(image.width/image.height>=maxwidth/maxheight){  
     if(image.width>maxwidth){    
     ImgD.width=maxwidth;  
     ImgD.height=(image.height*maxwidth)/image.width;  
     }else{  
     ImgD.width=image.width;    
     ImgD.height=image.height;  
     }  
     }  
    else{  
     if(image.height>maxheight){    
     ImgD.height=maxheight;  
     ImgD.width=(image.width*maxheight)/image.height;       
     }else{  
     ImgD.width=image.width;    
     ImgD.height=image.height;  
     }  
     }  
    }  
   }   
</script> 

呵呵,多了两个参数,也就是你能够接受的最大宽度maxwidth与最大高度maxheight

调用方式当然也变了,请看 <IMG  src= "temp.jpg" border=0  onload="javascript:DrawImage(this,300,240);">  

也就是说最大的宽度不超过300,最高不超过240,哈哈哈哈……

【上篇】
【下篇】

抱歉!评论已关闭.