使用JavaScript获取图像的真实宽度和高度?(在 Safari/Chrome 中)

我正在创建一个jQuery插件。

如何在 Safari 中使用 Javascript 获取真实的图像宽度和高度?

以下内容适用于 Firefox 3、IE7 和 Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

但在Webkit浏览器中,Safari和Google Chrome的值为0。


答案 1

Webkit 浏览器在加载图像后设置高度和宽度属性。我建议不要使用超时,而是使用图像的 onload 事件。下面是一个简单示例:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

为了避免 CSS 可能对图像尺寸产生任何影响,上面的代码会在内存中复制图像。这是FDisk提出的一个非常聪明的解决方案。

您还可以使用 和 HTML5 属性。naturalHeightnaturalWidth


答案 2

使用 HTML5 中的 and 属性。naturalHeightnaturalWidth

例如:

var h = document.querySelector('img').naturalHeight;

适用于IE9 +,Chrome,Firefox,Safari和Opera(统计数据)。