获取图片实际渲染的宽度高度与图片原始的宽度和高度

Posted 2020-10-13 心欲无痕

　　在写页面时经常会遇到需要获取图片的宽度、高度等情况。然而以前总是获取的是图片实际渲染的宽度和高度，也就是你用css或js设置后的图片的宽度和高度，并不是图片原始的尺寸。今天突然遇到这个问题，一时之间不知如何做，查了下资料，自己摸索了一下。特此总结一下。

　　例如。有这样一张图片，代码如下：　　

<img src="创建ajax的过程.png" alt="" >

　　1、获取图片渲染的宽度和高度(可用js或jQuery实现)。

　　（1）、使用js获取图片实际渲染的宽度、高度。

　　这里也有两种方式:

　　一种是： document.getElementsByTagName("img")[0].width   // 获取实际渲染宽度    document.getElementsByTagName("img")[0].height  // 获取实际渲染高度

　　另一种： document.getElementsByTagName("img")[0].offsetWidth  // 获取实际渲染宽度  document.getElementsByTagName("img")[0].offsetHeight // 获取实际渲染高度

 

　　（2）、使用jQuery·获取图片实际渲染宽度和高度。

　　 $("img").width()  // 获取实际渲染宽度  

　　 $("img").height()  // 获取实际渲染高度

　　

　　然而当我们通过css或者js重新设置了图片的宽度和高度后，再用上述方法并不能获取图片的原始尺寸，它获取的是图片实际渲染的宽度和高度，为了达到目的，我们需要使用下面这种方法。

　　2、获取图片原始的尺寸，也就是无论你是否用css、js设置过图片的宽度、高度，始终获取的是图片的原始尺寸。

　　html5提供了新属性naturalWidth/naturalHeight可以直接获取图片的原始宽、高，这两个属性在Firefox/Chrome/Safari/Opera及IE9+里已经实现。

　　直接就是 document.getElementsByTagName("img")[0].naturalWidth   document.getElementsByTagName("img")[0].naturalHeight 

　　由于该属性对于IE8及以下不支持，所以这里需要做一个兼容性处理。

　　html代码：

<img src="完整的http请求过程.png" alt="" style="width:400px" id="img">

 

　　js代码为：

　　<script>
        // 获取图片原始尺寸的兼容性写法。
        window.onload = function(){
            function getNaturalSize (img) {if(window.naturalWidth && window.naturalHeight) {
                    naturalWidth = img.naturalWidth; 
                } else {   // 兼容IE8及以下版本
                    var image = new Image();
                    image.src = img.src;
                    var naturalWidth = image.width;
                }
                return naturalWidth;
            }
            var natural = document.getElementById(‘img‘);
            alert(getNaturalSize (natural));
        }
    </script>

　　注意IE6/7/8的处理，创建了一个新的img，仅设置其src，这时需要让图片完全载入后才可以获取其宽高。