确定图像跨浏览器的原始大小？

Question

是否有一种可靠的,独立于框架的方法来确定<img src='xyz.jpg'>客户端调整大小的物理尺寸？

Answer 1

你有2个选择:

选项1:

删除width和height属性并阅读offsetWidth和offsetHeight

选项2:

创建一个JavaScript Image对象,设置src和读取width和height(你甚至不必将它添加到页面来执行此操作).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

由Pekka编辑:根据评论中的约定,我将函数更改为在图像的'onload'事件上运行.否则,对于大图像,由于图像尚未加载height,width因此不会返回任何内容.

Answer 2

图像(至少在Firefox上)具有naturalWidth/ height属性,因此您可以使用它img.naturalWidth来获取原始宽度

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

资源