如何使用JavaScript获取图像大小（高度和宽度）？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

是否有jQuery或纯JS API或方法来获取页面上图像的尺寸？

#1楼

Nicky De Maeyer询问背景图片；我只是从CSS中获取并替换了“ url（）”：

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

#2楼

您只能使用load事件的回调来真正做到这一点，因为在实际完成加载之前，图像的大小是未知的。类似于下面的代码...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

#3楼

在使用实际图像尺寸之前，您应该加载源图像。如果使用JQuery框架，则可以通过简单的方法获得实际的图像大小。

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

#4楼

我认为对这些答案的更新很有用，因为投票最好的答复之一是建议使用clientWidth和clientHeight，我认为它们已经过时了。

我已经对HTML5进行了一些实验，以查看实际返回了哪些值。

首先，我使用了一个名为Dash的程序来获取图像API的概述。它声明height和width是图像的渲染高度/宽度，而naturalHeight和naturalWidth是图像的固有高度/宽度（并且仅适用于HTML5）。

我使用了一个美丽的蝴蝶的图像，该图像来自高度为300且宽度为400的文件。

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

然后，我使用此HTML和高度和宽度的内联CSS。

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

结果：

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

然后，我将HTML更改为以下内容：

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

即使用高度和宽度属性，而不是内联样式

结果：

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

然后，我将HTML更改为以下内容：

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

即同时使用属性和CSS，以查看哪个优先。

结果：

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

#5楼

jQuery的答案：

$height = $('#image_id').height();
$width  = $('#image_id').width();

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3153492

标签

dash

jquery