js 等比例缩放图片

最新推荐文章于 2020-11-04 18:24:45 发布

zhudiwoaini

最新推荐文章于 2020-11-04 18:24:45 发布

阅读量621

点赞数

分类专栏： js 文章标签： xhtml border function 相册 image 照片

本文链接：https://blog.csdn.net/zhudiwoaini/article/details/7229255

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

做的项目里有用户上传相册的功能。发现上传的照片不符合规定的话就会变形了。从网上找了下js等比例缩放的资料。测试总结如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
    //maxWidth，maxHeight这个是你想要的宽度和高度
    function AutoResizeImage(maxWidth, maxHeight, objImg) {
        var img = new Image();
        img.src = objImg.src;
        var hRatio;
        var wRatio;
        var Ratio = 1;
        var w = img.width;
        var h = img.height;
        wRatio = maxWidth / w;
        hRatio = maxHeight / h;
        if (maxWidth == 0 && maxHeight == 0) {
            Ratio = 1;
        } else if (maxWidth == 0) {//
            if (hRatio < 1) Ratio = hRatio;
        } else if (maxHeight == 0) {
            if (wRatio < 1) Ratio = wRatio;
        } else if (wRatio < 1 || hRatio < 1) {
            Ratio = (wRatio <= hRatio ? wRatio : hRatio);
        }
        if (Ratio < 1) {
            w = w * Ratio;
            h = h * Ratio;
        }
        objImg.height = h;
        objImg.width = w;
    }
</script>
</head>
<body>
<a href="###" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" οnlοad="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br />
</body>
</html>

zhudiwoaini

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 等比例缩放图片

做的项目里有用户上传相册的功能。发现上传的照片不符合规定的话就会变形了。从网上找了下js等比例缩放的资料。测试总结如下：javascript自动按比例显示图片，按比例压缩图片显示 //maxWidth，maxHeight这个是你想要的宽度和高度 function AutoResizeImage(maxWidth, maxHeight, objImg) {
复制链接

扫一扫

专栏目录