使用jquery的远程图像属性

Question

目前我正在尝试获取远程图像宽度/高度。 我正在开发一个链接共享模块，就像你在Facebook上粘贴一个链接，你可以看到标题，描述和图像。

所以我尝试使用php getimagesize来获取图像宽度/高度非常慢。

所以我正在考虑使用jquery解决方案来获取远程图像宽度/高度，以便我可以过滤图像宽度小于100px。

我是jquery / javascript的新手

我试过类似的东西

var img = $('#imageID');
var width = img.clientWidth;
var height = img.clientHeight;
$('#info').html(width+'.. height: '+height);

它不工作并返回undefined ..高度：未定义

任何帮助表示赞赏。

谢谢

Answer 1

尝试这个：

var img = new Image();
img.src = 'http://your.url.here/image.png';
img.onload = function() {
  $('#info').text('height: ' + img.height + ' width: ' + img.width);
};

这种方法可以让您获得图像信息，而无需拥有<img>标记。 现在，也许你希望图像在页面上，所以你要做@patrick建议的那种情况。

Answer 2

如果您试图在客户端获取图像的宽度和高度，可以使用jQuery的.width()和.height()方法。

示例： http ： //jsfiddle.net/aeBWQ/

$(window).load(function() {
    var img = $('#imageID');
    var width = img.width();
    var height = img.height();
    $('#info').html(width+'.. height: '+height); 
});

执行$(window).load()将确保在获得高度/宽度之前加载图像。