用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&nbsp;img&nbsp;=&nbsp;$("img")[0];&nbsp;//&nbsp;Get&nbsp;my&nbsp;img&nbsp;elemvar&nbsp;pic_real_width,&nbsp;pic_real_height;$("<img/>")&nbsp;//&nbsp;Make&nbsp;in&nbsp;memory&nbsp;copy&nbsp;of&nbsp;image&nbsp;to&nbsp;avoid&nbsp;css&nbsp;issues &nbsp;&nbsp;&nbsp;&nbsp;.attr("src",&nbsp;$(img).attr("src")) &nbsp;&nbsp;&nbsp;&nbsp;.load(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pic_real_width&nbsp;=&nbsp;this.width;&nbsp;&nbsp;&nbsp;//&nbsp;Note:&nbsp;$(this).width()&nbsp;will&nbsp;not &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pic_real_height&nbsp;=&nbsp;this.height;&nbsp;//&nbsp;work&nbsp;for&nbsp;in&nbsp;memory&nbsp;images. &nbsp;&nbsp;&nbsp;&nbsp;});为了避免CSS可能对图像的尺寸产生任何影响，上面的代码会在内存中复制图像。这是一个非常聪明的解决方案。FDisk.您还可以使用naturalHeight和naturalWidthHTML 5属性。

Answer 2

使用naturalHeight和naturalWidth属性HTML 5.例如：var&nbsp;h&nbsp;=&nbsp;document.querySelector('img').naturalHeight;工作于IE9+，Chrome，Firefox，Safari和Opera(统计).

Answer 3

function&nbsp;getOriginalWidthOfImg(img_element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;t&nbsp;=&nbsp;new&nbsp;Image(); &nbsp;&nbsp;&nbsp;&nbsp;t.src&nbsp;=&nbsp;(img_element.getAttribute&nbsp;?&nbsp;img_element.getAttribute("src")&nbsp;:&nbsp;false)&nbsp;||&nbsp;img_element.src; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;t.width;}您不需要从图像或图像维度属性中删除样式。只需使用javascript创建一个元素，并获得创建的对象宽度。