图像的等比例缩放

<script type="text/javascript"> 
        $(function() { 
            $("#originalWidth").val($("#img1").width()); 
            $("#originalHeight").val($("#img1").height()); 
            var originalWidth = $("#originalWidth").val(); 
            var originalHeight = $("#originalHeight").val(); 
            var desireWidth = $("#desireWidth").val(); 
            var desireHeight = $("#desireHeight").val(); 
            var scaledWidth = 0, scaledHeight = 0; 
            var wRate = 1, hRate = 1, setRate = 1; 
            $("#btn").click(function() { 

                if (originalHeight > desireHeight) { 
                    hRate = desireHeight / originalHeight; 
                } 
                if (originalWidth > desireWidth) { 
                    wRate = desireWidth / originalWidth; 
                } 

                if (wRate != 1 || hRate != 1) { 
                    if (wRate > hRate) { 
                        setRate = hRate; 
                    } 
                    else { 
                        setRate = wRate; 
                    } 
                } 
                scaledWidth = originalWidth * setRate; 
                scaledHeight = originalHeight * setRate; 
                $("#scaledWidth").val(scaledWidth); 
                $("#scaledHeight").val(scaledHeight); 
                $("#img1").width(scaledWidth); 
                $("#img1").height(scaledHeight); 
            }); 

        }); 

    </script>

本文转自博客园张占岭(仓储大叔)的博客,原文链接:图像的等比例缩放,如需转载请自行联系原博主。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值