JavaScript 实现图片等比缩放

2021-01-24  乐帮网

javascript html

在开发网页的时候少不了图片,展示图片时自然会遇到缩放问题。一般情况下只要我们的图片宽高比例差不多时,缩放是没有问题的,展示不太影响美观。但是有一些网页对这个要求比较高,要求图片不能变形,缩放一定按比例展示,还不能影响网页整个布局。
网上给到一些 css方法都试过,均不能实现目的,所以特地使用JS来实现一了一下。以下案例摘自我的企业微信项目。

实现原理:
(1)获取图片的原始高度和宽度。可以通过以下代码实现:

 function getImgNaturalDimensions(oImg, callback) {
            var nWidth, nHeight;
            if (!oImg.naturalWidth) {
                nWidth = oImg.naturalWidth;
                nHeight = oImg.naturalHeight;
                callback(oImg,{ w: nWidth, h: nHeight });
            } else {
                var nImg = new Image();
                nImg.onload = function () {
                    var nWidth = nImg.width,
                        nHeight = nImg.height;
                    callback(oImg,{ w: nWidth, h: nHeight });
                }
                nImg.src = oImg.src;
            }
        }

(2)计算缩放后的宽度和高度,分为以下几种情况:
图片的高和宽都超限了,这时要算一下哪个超的多,按超多的缩放比例等比计算宽和高。
高超限,宽未超限,按高的缩放等比计算。
宽超限,高未超退,按宽的缩放等比计算。
高宽均未超限,返回原始宽和高。

 function scale(maxW, maxH, orgW, orgH) {
            if (orgW < maxW && orgH < maxH) {
                return { w: orgW, h: orgH }
            } else if (orgW > maxW && orgH > maxH) {
                var sw = orgW / maxW, sh = orgH / maxH;
                if (sw > sh) {
                    return { w: maxW, h: maxH / sw };
                } else {
                    return { w: maxW / sh, h: maxH };
                }
            } else if (orgW > maxW) {
                var sw = orgW / maxW;
                return { w: maxW, h: orgH / sw };
            } else {
                var sh = orgH / maxH;
                return { w: orgW/sh, h: maxH };
            }
        }

 

(3)给图片赋值宽和高。

  var resimg = scale(300, 999999, dimensions.w, dimensions.h);
                    image.style.width = resimg.w + 'px';
                    image.style.height = resimg.h + 'px';


这种方法经过测试可行,还未发现不兼容情况,可根据自己的情况调整代码。以上是主要代码,需要说明的是图片外的容器一定有要个宽度或高度不然都不限了就没有必要使用了,可同时有宽度和高度,也可以有其中一个,另一个不限时可设置成一个大值即可。

特上传了一份源码,可以单页面运行,如何你还是不懂可以尝试下载完整示例源码:https://pan.baidu.com/s/1reuLgT-wLmzFA101_1PmqA 

提取码请点击下方的捐赠按钮获取。

 

公众号二维码

关注我的微信公众号
在公众号里留言交流
投稿邮箱:1052839972@qq.com

庭院深深深几许?杨柳堆烟,帘幕无重数。
玉勒雕鞍游冶处,楼高不见章台路。
雨横风狂三月暮。门掩黄昏,无计留春住。
泪眼问花花不语,乱红飞过秋千去。

欧阳修

付款二维码

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力