实用技巧：js图片等比缩放

经常看到一些网页，其中的图片比例失调，这里提供一组方法，供需要的朋友参考。基本构思如下：

1、在指定宽度和高度范围内等比例最大化缩放图片；

2、按指定宽度等比最大化缩放图片；

3、按指定高度等比最大化缩放图片。

原方法在pvo.js文件中，为了便于交流，在这里做了修改。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>等比缩放图片</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">

            /**
             *定义缩放的数据结构
             */
            var scale={
                width:null,
                height:null
            };

            /**
             *@see cn.hkm.web.Picture.java
             *在指定宽度和高度范围内最大化缩放图片
             *@param width  图片原始宽度
             *@param height 图片原始高度
             *@param outWidth  指定宽度范围
             *@param outHeight 指定宽度范围
             */

            var scaleWH=function(width,height,outWidth,outHeight){
                width=parseInt(width);
                height=parseInt(height);
                outWidth=parseInt(outWidth);
                outHeight=parseInt(outHeight);

                var h=width;
                var w=height;
                var r=height/width;
                var rs=outHeight/outWidth;
                if((width<=outWidth)&&(height<=outHeight)){
                    w=width;
                    h=height;
                }
                if((width<=outWidth)&&(height>outHeight)){
                    w=parseInt(outHeight/r);
                    h=outHeight;
                }
                if((width>outWidth)&&(height<=outHeight)){
                    w=outWidth;
                    h=parseInt(outWidth*r);
                }
                if((width>outWidth)&&(height>outHeight)){
                    if(r<rs){
                        w=outWidth;
                        h=parseInt(outWidth*r);
                    }
                    if(r>rs){
                        h=outHeight;
                        w=parseInt(outHeight/r);
                    }
                    if(r==rs){
                        w=outWidth;
                        h=outHeight;
                    }
                }
                scale.width=w;
                scale.height=h;
                return scale;
            }

            /**
             *@see cn.hkm.web.Picture.java
             *在指定宽度范围内最大化缩放图片
             *@param width  图片原始宽度
             *@param height 图片原始高度
             *@param outWidth  指定宽度范围
             */
            var scaleW=function(width,height,outWidth){
                width=parseInt(width);
                height=parseInt(height);
                outWidth=parseInt(outWidth);
                if(width<outWidth){
                    scale.width=width;
                    scale.height=height;
                }else{
                    scale.width=outWidth;
                    scale.height=parseInt(outWidth*height/width);
                }
                return scale;
            }

            /**
             *@see cn.hkm.web.Picture.java
             *在指定高度范围内最大化缩放图片
             *@param width  图片原始宽度
             *@param height 图片原始高度
             *@param outWidth  指定宽度范围
             */
            var scaleH=function(width,height,outHeight){
                width=parseInt(width);
                height=parseInt(height);
                outHeight=parseInt(outHeight);
                if(height<outHeight){
                    scale.width=width;
                    scale.height=height;
                }else{
                    scale.width=parseInt(outHeight*width/height);
                    scale.height=outHeight;
                }
                return  scale;
            }

            function see(){
                scale=scaleWH(1366,768,600,600);
                document.getElementById("byWH").innerHTML="<img src=\'images/img001.png\' width=\'"+scale.width+"px\' height=\'"+scale.height+"px\'  />";

                scale=scaleW(1366,768,500);
                document.getElementById("byW").innerHTML="<img src=\'images/img001.png\' width=\'"+scale.width+"px\' height=\'"+scale.height+"px\'  />";

                scale=scaleH(1366,768,300);
                document.getElementById("byH").innerHTML="<img src=\'images/img001.png\' width=\'"+scale.width+"px\' height=\'"+scale.height+"px\'  />";

            }

        </script>
    </head>
    <body onload="see()" >

        <div id="byWH"></div>
        <br/>
        <div id="byW"></div>
        <br/>
        <div id="byH"></div>
    </body>
</html>

url:http://greatverve.cnblogs.com/archive/2011/11/23/js-zoom-pic.html

秒客网

实用技巧：js图片等比缩放

相关文章