如何使用Javascript獲取圖片的寬度和高度？

-1

我想根據圖像寬度和高度僅從HTML DOM加載某些圖像。如何使用Javascript獲取圖片的寬度和高度？

我不知道如何使用JavaScript訪問圖像的寬度和高度屬性。

這必須在任何瀏覽器下運行。

我的應用程序是一個書籤，因此所有圖像都會在用戶啓動書籤時加載。所以，我只會掃描DOM，獲取所有img srv值，並使用它們。訣竅是我不想要所有的圖像，只是符合我想要的尺寸的圖像。

我有這樣的代碼，到目前爲止，它得到所有從DOM圖像：

var imgObj = document.getElementsByTagName('img'); 

for(var i=0;i<imgObj.length;i++) 
{ 
imgsList[i] = imgObj[i].getAttribute('src'); 
if(consoleLog)console.log(imgsList[i]); 
} 

return images = imgObj.length;

我的問題已經在這裏解決：How to get image size (height & width) using JavaScript?

但我不知道如何去適應我的代碼的img .clientWidth

它是imgsList [i] .clientWidth？

來源

2012-07-17 Ionut Flavius Pogacian

你是什麼意思「僅加載HTML DOM中的某些圖像」？你的圖片加載了嗎？ – 2012-07-17 12:21:18

是的，請寫出答案;在那個地址，沒有找到答案。 – 2012-07-17 12:22:07

是的，他們被加載，我需要重新加載，只有一些，基於圖像的高度和寬度。 – 2012-07-17 12:22:58

imgObj[i].clientWidth,imgList包含僅僅src屬性的列表。

使用圖像的任何寬度和高度時，請謹慎使用，因爲它們異步加載到瀏覽器中。這意味着當DOM加載時，寬度和高度將爲0.只有在圖像自己完成加載後，元素纔會適當地設置寬度和高度。

爲了解決這個問題，你可以有加載處理程序，當圖像加載完成後，它將執行回調。

雖然有點奇怪的行爲是緩存圖像的瀏覽器不會再次調用這個加載函數（至少在jQuery中不是這樣），所以你需要確保緩存版本你做了任何寬度檢查DOM負載回調。

可以在標準的JavaScript然而，做到這一點作爲一個例子，因爲我有我的，我在工作的前一個jQuery例如早期我會告訴你如何能在jQuery中進行。

假設圖像有id=imageid

function checkWidths() { 
    //do anything you want here 

    //jQuery uses the .width and .height functions to get the appropriate attributes of an element, these return a value without the px % etc. To get the actual css use .css('width') instead. 
} 

$(document).ready(function() { 
    if($('#imageid').width() > 0) 
     checkWidths(); 
}); 

$('#imageid').load(function() { 
    checkWidths(); 
}

來源

2012-07-17 12:18:44

我的應用程序是一個書籤，所以所有圖像將在用戶啓動書籤時加載。所以，我只會掃描DOM，獲取所有img srv值，並使用它們。訣竅是我不想要所有的圖像，只是符合我想要的尺寸的圖像。 – 2012-07-17 12:26:25

如果所有圖像都已加載，那麼只要DOM加載，您可以使用clientWidth屬性檢查它們的大小，如果您確信這些圖像將被及時加載。我認爲它仍然值得檢查，因爲小書籤可能會在圖像加載完成之前調用緩慢的連接。 – 2012-07-17 12:30:09

在checkWidth函數中，您可以檢查其寬度和高度，並決定是否重新加載。 – 2012-07-17 12:32:29

要知道，圖像的尺寸，你需要或者：

有加載圖像（那麼clientWidth是確定的，如果在執行腳本在負載回調中）
將它們指定爲屬性（<img src=... width=33>）。在這種情況下使用imgObj[i].getAttribute('width');

注意，如果要重新加載圖像，並避免所有的緩存問題，最簡單的是改變它的URL，例如像這樣：

var srcbase = imgObj.getAttribute('src').split('?')[0]; 
imgObj.src = srcbase + '?time='+(new Date()).getTime();

（這個假設的圖像由直到'？'的路徑定義）

來源

2012-07-17 12:20:23

我可能沒有寬度屬性，img可能會在css文件中設置尺寸，或者不是。 – 2012-07-17 12:34:41

這就是它們，它的工作原理非常完美。

populateImgsList : function() 
    { 

    var imgObj = document.getElementsByTagName('img'); 

    var j = 0; 

    for(var i=0;i<imgObj.length;i++) 
    { 

    if(consoleLog)console.log('w '+imgObj[i].clientWidth+' h: '+imgObj[i].clientHeight); 

    if((imgObj[i].clientWidth>100) && (imgObj[i].clientHeight>100)) 
    { 

    imgsList[j] = imgObj[i].getAttribute('src'); 
    if(consoleLog)console.log(imgsList[j]); 

    j++; 

    } 

    } 

    return images = imgList; 

    },

來源

2012-07-17 12:44:11

如何使用Javascript獲取圖片的寬度和高度？

回答

相關問題