Javascript：获取图像大小答案

【问题标题】：Javascript: get image sizeJavascript：获取图像大小
【发布时间】：2012-07-20 13:07:01
【问题描述】：

我无法获得正确的图片尺寸

这是 HTML：

<img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
    height="20">


<div id="result"></div>
correct result: 76

还有 javascript：

var v1 = $('#image').height();
var v2 = $('#image').removeAttr('height').height();
var i =  $('<img>').attr('src',  $('#image').attr('src'));
var v3 = i.height()

i.one('load', function() {
    var v4 = $(this).height();
    $('#result').text(v1 + " " + v2 + " " + v3 + " " + v4);
}).each(function() {
    if(this.complete) {
        $(this).load();
    }
});

我使用了 4 种方法，但都失败了。
更新：方法 2 有效，但我想使用方法 4，因为在脚本执行时可能没有加载图像。

测试链接：http://jsfiddle.net/cMZK7/7/

【问题讨论】：

正确答案是 not 80。图像周围的 <div> - 这是您使用 $('#image') 检查的内容 - 由于填充，高 24 像素大约 20 像素高的图像。
您的测试代码与问题中的代码不同。
对不起，我修正了代码。
看到这个答案：stackoverflow.com/a/1944298/1515540
Determine original size of image cross browser?的可能重复

标签： javascript jquery image

【解决方案1】：

完整正确答案：https://stackoverflow.com/a/1944298/966972

（这个问题在 cmets 中，但不在答案中）

【讨论】：

【解决方案2】：

试试这个，

<img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />

<script>
$("#image").load(function() {

    alert($("#image").height()); // Alerts 76
    });  

</script>

在这里提琴http://jsfiddle.net/FgrQW/1/

【讨论】：

【解决方案3】：

不确定我是否明白，但如果重点是在 height 属性中找到值，这将起作用：

var height = $("#image img").prop('height');

要获得图像的实际高度，实际高度是指图像的实际高度，而不是您在 CSS 等中设置的高度，这样的事情应该可以工作：

var img = new Image();
    img.src = $('img', '#image')[0].src;
    img.onload = function() {
        $("#result").html(img.height);
    }

FIDDLE

旧版本的 IE 在缓存图像时会出现 onload 事件。

【讨论】：

【解决方案4】：

前两个得到周围div的高度，而不是img。

console.log($('img').height(), $('img').width()) 给我 20px 和 88px，这是图像的正确尺寸

【讨论】：

这是调整后图像的大小。我想获得原始图像尺寸。
啊，这个问题不清楚。您的问题与stackoverflow.com/questions/1944280/… 重复

【解决方案5】：

您必须删除height 属性，并等待图像加载完毕（使用load 事件）。

或者，创建一个新的图像对象，将相同的图像加载到其中，然后等待图像加载完毕。

【讨论】：

【解决方案6】：

试试

$('<img>').get()[0].height;

【讨论】：

这将创建一个没有高度属性的新图像元素，因此结果将为空。即使你得到元素的实际高度，它仍然不是图像的高度，因为元素没有源属性。

【解决方案7】：

看起来您使用图像 id 抓取 div 的高度，而不是抓取该 div 内图像的高度。试试这个：

var v1 = $('#image img').height();

【讨论】：

【解决方案8】：

问题可能是您在load 事件之前设置了src 属性。在许多浏览器上，这将阻止事件处理程序触发。

【讨论】：

【解决方案9】：

您引用的是图像所在的 DIV，而不是图像本身。

【讨论】：

谢谢，我修正了代码。但是方法 3 和 4 还是不行。