用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。

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建议的一个非常聪明的解决方案。

您也可以使用naturalHeight和naturalWidth HTML5属性。

使用HTML5中的naturalHeight和naturalWidth属性。

例如：

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

适用于IE9 +，Chrome，Firefox，Safari和Opera（统计）。

function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

您不需要从图像或图像尺寸属性中删除样式。 只需使用javascript创建一个元素并获取创建的对象宽度。