2010-08-29 51 views
7

目前我正試圖獲得遠程圖像的寬度/高度。我正在開發鏈接共享模塊,就像在Facebook上粘貼鏈接時一樣,您可以看到標題,說明和圖像。使用jquery的遠程圖像屬性

所以我嘗試使用PHP getimagesize來獲取圖像寬度/高度非常緩慢。

所以我想使用jquery解決方案來獲取遠程圖像的寬度/高度,以便我可以過濾圖像寬度小於100px。

我新的jQuery的/ JavaScript的

我想是這樣

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

它不工作,返回undefined ..高度:未定義

任何幫助表示讚賞。

謝謝

+0

出於好奇,你用這個鏈接共享代碼走了多遠。即時通訊試圖找到一個jquery插件可以做到這一點.... – 2011-01-04 09:03:03

回答

13

試試這個:

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建議在這種情況下。

+1

+1看起來很聰明。 – Sarfraz 2010-08-29 14:37:58

+0

也許我誤解了這個問題。如果意圖是將信息(不一定)插入到DOM中,那麼這就是要走的路。 – user113716 2010-08-29 14:43:24

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()將確保圖像所得到的高度/寬度之前加載。

+0

謝謝你,你的解決方案也可以。 – cicakman 2010-08-30 04:45:18