js获取图片原始尺寸

Posted 2020-09-28 莫问、前程

如何获取图片的原始尺寸大小？

　　如下，当给 img 设置一个固定的大小时，要怎样获取图片的原始尺寸呢？

#oImg{
    width: 100px;
    height: 100px;
}

<img src="images/test.jpg" id="oImg" alt="">

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

 w = document.getElementByTagName("img").naturalWidth;
 h = document.getElementsByTagName("img").naturalHeight;
    
console.log(w + ‘  ‘ + h);

打印出来的结果与原始尺寸相符。但有个前提是，必须在图片完全下载到客户端浏览器才能判断。

如果是不支持的版本浏览器，那可以用传统方法判断，如下：

   var oImg = document.getElementById("oImg"),
        w,h;

    if (oImg.naturalWidth) {
        // HTML5 browsers
        w = oImg.naturalWidth;
        h = oImg.naturalHeight;
    }
    else {
        // IE 6/7/8
        var nImg = new Image();
        nImg.src = oImg.src;
        nImg.onload = function () {
            w = nImg.width;
            h = nImg.height;

            console.log(w + "  " + h)
        }
    }

此时为什么要加 onload 的原因是，图片可能没加载完成，导致图片的 width 、height 无法获取到。

 

 

还有下面一种情况：图片外面有个盒子，且盒子display:none；

.imgbox{
        width: 100px;
        height: 100px;
        display: none;
}

<div class="imgbox">
    <img src="images/test.jpg" id="oImg" alt="">
</div>

嫌创建 new Image（） 麻烦，就想到另外一种方法。

var oImg = document.getElementById("oImg"),
        w,h;

    if (oImg.naturalWidth) {
        // HTML5 browsers
        w = oImg.naturalWidth;
        h = oImg.naturalHeight;
    }
    else {
        // IE 6/7/8
        w = oImg.width;
        h = oImg.height;
    }

console.log(w + "  " + h)

但这种方法，在ie8 下是获取不到 img width / height 的。此时，我们要对 imgbox 做下处理。

.imgbox{
　　width: 0;
　　overflow: hidden;
}

现在就可以兼容 ie8 了。