js 自適應(yīng)控制圖片的大小

字號:


    <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>
    調(diào)用方式(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>
    呵呵,多了兩個參數(shù),也就是你能夠接受的最大寬度maxwidth與最大高度maxheight