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

【问题标题】：Get full size of image in javascript/jquery在 javascript/jquery 中获取完整大小的图像
【发布时间】：2012-03-26 18:30:03
【问题描述】：

我有一个页面上的图像已调整大小以适合 div，例如 400x300。如何在 jQuery 中获取图像的全尺寸（~4000x3000）？ .width() 和 .height() 似乎只返回图像的当前大小。

【问题讨论】：

标签： javascript jquery image resize

【解决方案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');

FIDDLE

【讨论】：

在不牺牲性能的情况下快速完美的解决方案：D

【解决方案2】：

您可以克隆图像，删除高度和宽度属性，将其附加到正文并在删除之前获取宽度和大小。

jsFiddle 演示在这里：http://jsfiddle.net/58dA2/

代码是：

$(function() {
   var img = $('#kitteh'); // image selector
   var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
    $('#height').text(hiddenImg.height());
    $('#width').text(hiddenImg.width());
    hiddenImg.remove();            
});

【讨论】：

强制猫图片的道具 :)
@npc 谢谢！我什至不是“猫人”，但在罗马时...... :-)
+ 用于另一种不同的解决方案 :)
不错的解决方案。此外，我将样式属性的宽度和高度设置为 auto：img.clone().css({ visibility: 'hidden', width: 'auto', height: 'auto' })

【解决方案3】：

您可以使用包含相同源文件的 Image 对象来执行此操作，例如：

var preloader = new Image();
preloader.src = 'path/to/my/file.jpg';

preloader.onload = function(){
var height = preloader.height;
var width = preloader.width;
}

【讨论】：

【解决方案4】：

试试这个：

var pic = $("img")

// 如果 img-element 设置了宽度和高度，则需要删除这些 pic.removeAttr("宽度"); pic.removeAttr("身高");

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

【讨论】：

我已经编辑了我的答案，现在它可以在你的 [jsfiddle.net/kCN2x] 链接上查看