是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
你还可以使用:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
其他回答
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();
您可以通过编程方式获取图像并使用JavaScript检查尺寸…
const img = new Image(); img。Onload = function() { 警报(这。Width + 'x' + this.height); } img。src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
如果图像不是标记的一部分,这可能很有用。
简单地说,您可以像这样进行测试。
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>
在使用真实图像大小之前,您应该加载源图像。如果使用jQuery框架,可以以简单的方式获得真实图像大小。
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
我认为,使用clientWidth和clientHeight已经过时了。
我用HTML5做了一些实验,看看哪些值实际上会被返回。
首先,我使用了一个名为Dash的程序来获得图像API的概述。
它声明了高度和宽度是图像的渲染高度/宽度,而naturalHeight和naturalWidth是图像的固有高度/宽度(仅适用于HTML5)。
我使用了一个高300,宽400的文件中一个美丽的蝴蝶的图像。下面是JavaScript代码:
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