用JavaScript获取图像的真实宽度和高度？(Safari/Chrome)

Question

用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 heightpic.removeAttr("width");  pic.removeAttr("height");var pic_real_width = pic.width();var pic_real_height = pic.height();但是在像Safari和GoogleChrome这样的Webkit浏览器中，值是0。

Answer 1

WebKit浏览器在加载图像后设置高度和宽度属性。与其使用超时，我建议使用图像的onload事件。下面是一个简单的例子：

var img = $("img")[0]; // Get my img elemvar 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和naturalWidthHTML 5属性。

Answer 2

使用naturalHeight和naturalWidth属性HTML 5.

例如：

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

工作于IE9+，Chrome，Firefox，Safari和Opera(统计).

Answer 3

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创建一个元素，并获得创建的对象宽度。