js图片按比例缩放程序代码

浏览数:340
2019-1-7
image.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js图片等比缩放程序代码</title>
    <style>
        .image-box {
            width: 100%;
        }
    </style>
</head>
<body>
<h1>js图片等比缩放程序代码</h1>
<a href="http://www.baidu.com">
    <div class="image-box">
        <img class="image-tag"
             src="https://api.yuanchuangxiaoyuan.com/image.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/qfMmVoEgEk3tjOJMo5U72sdpIHEyC66XibpriaM9WD66MW0mnrb3clXnx5DMPa54ObPwyCYVh2TGN4pNR4LLEkVQ/640?wx_fmt=jpeg"/>
    </div>
    <br>
    <div class="image-box">
        <img class="image-tag"
             src="https://api.yuanchuangxiaoyuan.com/image.php?url=http://images.yunxiaotui.com/FnMA6XHuwOEWZbFx9m1ZL0k4aIB4"/>
    </div>
    <br>
</a>
<br>
</body>
</html>
<script>
    /**
     * 定义改变图片样式的对象
     *
     * @param className 图片盒子class名称
     * @param aspectRatio 图片高宽比 高度/宽度
     */
    let changeImageStyle = function (className, aspectRatio) {
        this.className = className;
        this.aspectRatio = aspectRatio;
    };

    /**
     * 设置图片的样式
     *
     * @param imageObj 图片对象
     * @param imageWidth 图片实际宽度
     * @param imageHeight 图片实际高度
     * @param imageBoxWidth 图片盒子宽度
     * @param imageBoxHeight 图片盒子高度
     */
    changeImageStyle.prototype.callback = function (imageObj, imageWidth, imageHeight, imageBoxWidth, imageBoxHeight) {
        let top = 0;
        let width = imageBoxWidth;
        let height = imageBoxWidth * imageHeight / imageWidth;
        // 设置宽度属性
        imageObj.style.width = width + "px";
        // 设置高度属性
        imageObj.style.height = height + "px";
        // 设置定位属性
        imageObj.style.position = "absolute";
        // 设置top属性
        if (height > imageBoxHeight) {
            top = (imageBoxHeight - height) / 2;
        } else {
            top = (height - imageBoxHeight) / 2;
        }
        imageObj.style.top = top + "px";
    };

    /**
     * 获取图片高度和高度的方法
     *
     * @param imageObj 图片对象
     * @param imageBoxWidth 图片盒子宽度
     * @param imageBoxHeight 图片盒子高度
     * @param callback 回调函数
     */
    changeImageStyle.prototype.getImgNaturalDimensions = function (imageObj, imageBoxWidth, imageBoxHeight, callback) {
        let image = new Image();
        image.src = imageObj.src;
        image.onload = function () {
            callback(imageObj, image.width, image.height, imageBoxWidth, imageBoxHeight)
        };
    };

    /**
     * 设置图片盒子的样式
     */
    changeImageStyle.prototype.setImageBox = function () {
        let that = this;
        let imagesBoxObj = document.getElementsByClassName(that.className);
        if (imagesBoxObj.length > 0) {
            for (let i = 0; i < imagesBoxObj.length; i++) {
                let imageObj = imagesBoxObj[i].getElementsByTagName('img');
                // 获取宽度属性
                let width = imagesBoxObj[i].offsetWidth;
                // 获取高度属性
                let height = imagesBoxObj[i].offsetWidth * that.aspectRatio;
                // 设置高度属性
                imagesBoxObj[i].style.height = height + "px";
                // 设置隐藏属性
                imagesBoxObj[i].style.overflow = "hidden";
                // 设置定位属性
                imagesBoxObj[i].style.position = "relative";
                // 获取图片高度和高度
                that.getImgNaturalDimensions(imageObj[0], width, height, that.callback);
            }
        }
    };

    /**
     * 设置图片样式的入口方法
     *
     * 例如： setImageEntrance('image-box', 9 / 16);
     */
    changeImageStyle.prototype.setImageEntrance = function () {
        let that = this;
        // 当页面加载完成时，设置图片样式
        window.onload = function () {
            that.setImageBox();
        };
        // 当浏览器窗口大小改变时，设置图片样式
        window.onresize = function () {
            that.setImageBox();
        }
    };

    let image = new changeImageStyle('image-box', 9 / 16);
    image.setImageEntrance();

</script>
喜欢 0
js图片按比例缩放程序代码

相关推荐
