JS图片等比缩放-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42599560/article/details/103909501

JS实现等比例缩放图片

有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下如果我直接返回的话那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码：

<div id="demo1"> 
    <img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""> 
</div>

CSS代码如下：

#demo1{width:800px;height:300px;overflow:hidden;}

外层div的css样式定了宽度是800像素高度是300像素，但是这张图片的宽度和高度分别是1060像素和300像素，如果我们不做任何处理的话，那么图片肯定会有260像素被隐藏掉了，而我们现在想要图片被渲染出来后根据外层容器800像素×300像素的宽度和高度分别等比例缩放，这样的话不管图片的宽度和高度是多少，都可以自适应！

下面我们可以先看看JSFIddle效果是什么样的！第一张图片是没有任何处理的，第2张小的是根据宽度800像素进行等比例缩放后的。

想要看效果，请轻轻点击我！

已知图片的宽度和高度的等比例缩放的原理是：

在这里插入图片描述

HTML代码如下：

<img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" width="1060" height="300" alt=""> 
<div id="demo1"> 
    <img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""> 
</div>

CSS代码如下：

#demo1{width:800px;height:300px;overflow:hidden;}

JS代码如下：

/**
 * 已知图片的宽度和高度的等比例缩放
 */

 function knowImgSize(id) {
    var idWidth = $(id).width(),  // 容器的宽度和高度
        idHeight = $(id).height();

    $(id + ' img').each(function(index,img){
        var img_w = $(this).width(),
            img_h = $(this).height();

        // 如果图片自身宽度大于容器的宽度的话 那么高度等比例缩放
        if(img_w > idWidth) {
            
            var height = img_h * idWidth / img_w;
            $(this).css({"width":idWidth, "height":height});
        }
    });

 }

 // 初始化
 $(function(){
    knowImgSize("#demo1");
 });

2.JS实现未知图片大小的等比例缩放

当页面加载的图片尺寸未知的情况下，上述代码则不能进行有效的缩放.那么我们现在有没有办法也可以实现类似的？

JSFiddle demo链接如下：

想要查看效果，先轻轻的点击我下！

下面是HTML代码如下：

<h2>缩放后的</h2>
<div class="parentCls">
    <p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p>
    <p><img src="http://gtms01.alicdn.com/tps/i1/T11LpGFs8jXXb5rXb6-1060-300.jpg" class="autoImg"></p>
    <p><img src="http://img04.taobaocdn.com/imgextra/i4/397746073/T2fjl5XA8aXXXXXXXX-397746073.jpg" class="autoImg"/></p>
    <p><img src="http://img03.taobaocdn.com/tps/i3/T1CXpTFkpcXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
    <p><img src="http://gtms01.alicdn.com/tps/i1/T1hC0HFwxaXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
    <p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p>
    <p><img src="http://gtms01.alicdn.com/tps/i1/T1hC0HFwxaXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
</div>

简单的Css代码如下：

<style>
/*demo style*/
body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; }
a { color:#0259C4; }
a:hover { color:#900; }
.demoInfo { padding:10px; background:#F7F7F7; border:1px solid #EEE; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.tips { color:#CCC; }
.parentCls { width:680px; padding:10px; margin-top:50px; overflow:hidden; border:1px solid #CCC; }
.parentCls p { padding: 0 8px; }
.parentCls img { border:0 none; }
</style>

所有的JS代码如下：

/**
 * JS实现未知图片大小的等比例缩放
 */

 function AutoImg(options) {
    
    this.config = {
        autoImg     : '.autoImg',     // 未知图片dom节点
        parentCls   : '.parentCls'    // 父节点
    };

    this.cache = {
        
    };

    this.init(options);
 }
 
 AutoImg.prototype = {
    
     init: function(options){
        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config;
        
        $(_config.autoImg).each(function(index,img){
            
            var src = img.src,
                parentNode = $(img).closest(_config.parentCls),
                parentWidth = $(parentNode).width();
                
            // 先隐藏原图
            img.style.display = 'none';
            img.removeAttribute('src');

            

            // 获取图片头尺寸数据后立即调整图片
            imgReady(src, function (width,height) {

                // 等比例缩小
                if (width > parentWidth) {
                    height = parentWidth / width * height,
                    width = parentWidth;
                    img.style.width = width + 'px';
                    img.style.height = height + 'px';
                };
                // 显示原图
                img.style.display = '';
                
                img.setAttribute('src', src);
                
            });
        });
     }
 };

 var imgReady = (function(){
    var list = [],
        intervalId = null;

    // 用来执行队列
    var queue = function(){

        for(var i = 0; i < list.length; i++){
            list[i].end ? list.splice(i--,1) : list[i]();
        }
        !list.length && stop();
    };
    
    // 停止所有定时器队列
    var stop = function(){
        clearInterval(intervalId);
        intervalId = null;
    }
    return function(url, ready, error) {
        var onready = {}, 
            width, 
            height, 
            newWidth, 
            newHeight,
            img = new Image();
        img.src = url;

        // 如果图片被缓存，则直接返回缓存数据
        if(img.complete) {
            ready(img.width, img.height);
            return;
        }
        width = img.width;
        height = img.height;

        // 加载错误后的事件 
        img.onerror = function () {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };

        // 图片尺寸就绪
        var onready = function() {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 如果图片已经在其他地方加载可使用面积检测
                newWidth * newHeight > 1024
            ) {
                ready(img.width, img.height);
                onready.end = true;
            };
        };
        onready();
        // 完全加载完毕的事件
        img.onload = function () {
            // onload在定时器时间差范围内可能比onready快
            // 这里进行检查并保证onready优先执行
            !onready.end && onready();
            // IE gif动画会循环执行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };
        
        
        // 加入队列中定期执行
        if (!onready.end) {
            list.push(onready);
            // 无论何时只允许出现一个定时器，减少浏览器性能损耗
            if (intervalId === null) {
                intervalId = setInterval(queue, 40);
            };
        };
    }
})();