Question

在我们的网站中，我们正在访问我们的图像，或者图像来源就像

<img src="image_manage.php&type=resize&id=12" />

我的问题是，在jquery中使用此源获取图像的高度和宽度。我写了一个代码来获得宽度和高度

photograf = new Image();
photograf.src = '/image_manage.php&type=resize&id=12';
var width = photograf.width;
var height = photograf.height;

但是我的高度和宽度值都为零是什么问题？

Answer 1

试试这段代码：

var oImage = new Image();

oImage.onload = function(){
    this.width// width of loaded image
}

oImage.src = '/path/to/image.gif';

或类似的东西更好：

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Answer 2

试试这个

width = $("img").attr('width');    //can also $("img").width();
hight = $("img").attr('height');   //can also $("img").height();

Answer 3

您必须等待加载图像才能检测到它的大小。

$("#imgElement").attr('src',photograf.src).load(function(){
    var w = $("imgElement").width();
    var h = $("imgElement").height();
});

这里我设置了图像的src参数，并使用jQuery的load()函数来检测图像何时成功加载。

参考 -

load()

Answer 4

使用jQuery width()和height()函数：

jQuery(function(){
    var $width = jQuery("img").width();
    var $height = jQuery("img").height();
});

Answer 5

你可以试试这个

width = $("img").prop('width');   
hight = $("img").prop('height');

别忘了将js代码放入load或document ready个事件

$(document).ready(function(){
    var height = $('img').prop('height');
    var width= $('img').prop('width');
    alert('Height :'+height+' AND '+'width :'+width);
});

这是运行示例 示例 jsfiddle

Answer 6

当您询问图像尺寸时，图像尚未加载。 onLoad方法有助于实现此目的。

photograf = new Image();
photograf.src = '/image_manage.php&type=resize&id=12';
photograf.onLoad = function(){ 
    var width = this.width; 
    var height = this.height; 
};

使用图像源查找图像宽度和高度的jQuery代码

6 个答案: