首页 > 代码库 > js获取图片原始尺寸

js获取图片原始尺寸

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

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

#oImg{
    width: 100px;
    height: 100px;
}
<img src=http://www.mamicode.com/"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) } }

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

 

 

还有下面一种情况:图片外面有个盒子,且盒子display:none;

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

<div class="imgbox">
    <img src=http://www.mamicode.com/"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 了。

 

js获取图片原始尺寸