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

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

使用 jQuerywidth()和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; 
};