通过Js自动按比例缩放图片

最新推荐文章于 2024-03-09 18:15:26 发布

qinyun118

最新推荐文章于 2024-03-09 18:15:26 发布

阅读量651

点赞数

文章标签： function

本文链接：https://blog.csdn.net/qinyun118/article/details/4973933

版权

       //图片按比例缩放入口,sender为图片框Id
        function onPreviewLoad(sender){   
            autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );   
        }   
        
        function autoSizePreview( objPre, originalWidth, originalHeight ){   
            var zoomParam = clacImgZoomParam( 110, 160, originalWidth, originalHeight );   
            objPre.style.width = zoomParam.width + 'px';   
            objPre.style.height = zoomParam.height + 'px';   
            objPre.style.marginTop = zoomParam.top + 'px';   
            objPre.style.marginLeft = zoomParam.left + 'px';   
        }   

    //图片大小比例调整
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){   
        var param = { width:width, height:height, top:0, left:0 };   
           
        if( width>maxWidth || height>maxHeight ){   
            rateWidth = width / maxWidth;   
            rateHeight = height / maxHeight;   
               
            if( rateWidth > rateHeight ){   
                param.width = maxWidth;   
                param.height = height / rateWidth;   
            }else{   
                param.width = width / rateHeight;   
                param.height = maxHeight;   
            }   
        }   
           
        param.left = (maxWidth - param.width) / 2;   
        param.top = (maxHeight - param.height) / 2;   
           
        return param;   
    }