在javascript/jquery中获取完整大小的图像

Question

我在页面上有一个图像已经调整大小以适应div,比如400x300.如何在jQuery中获得图像的完整大小(~4000x3000)？.width()和.height()似乎只返回图像的当前大小.

Answer 1

图像具有naturalWidth与naturalHeight包含图像的实际,未经修饰的宽度和高度属性,即图像的,而不是CSS设置它的实际尺寸.

人们仍然需要等待图像加载

$('#idOfMyimg').on('load', function() {
    var height = this.naturalHeight,
        width  = this.naturalWidth;
});

另一种选择是使用与源相同的文件创建一个新图像,并从中获取尺寸,只要它从未添加到DOM,外部样式不会影响它

var img = new Image();

img.onload = function() {
   var height = this.height,
       width  = this.width;
}
img.src = $('#idOfMyimg').attr('src');

小提琴