在Javascript中獲取圖像變量的高度和寬度

我試圖在圖像變量中加載一張圖片，並測試它是否是橫向或縱向放入框架中。用戶從下拉列表中選擇URL。但是，下面的代碼片段每隔一段時間就會給出0的寬度。我在做什麼愚蠢的事情？在Javascript中獲取圖像變量的高度和寬度

 var Select_Picture = document.getElementById("ddlSelectPicture"); 
     var Client_Picture = document.getElementById("imgClientPicture"); 
     var Temp_Image = new Image(); 
     var Image_Height; 
     var Image_Width; 

     Temp_Image.src = Select_Picture.value; 

     // WAIT FOR PICTURE TO LOAD 
     while (Temp_Image.width < 1 || Temp_Image.height < 1) 
     { 
      Image_Width = Temp_Image.width; 
     } 
     Image_Height = Temp_Image.height; 

     alert(Image_Width + " " + Image_Height);

來源

2017-08-31 Wolfy

問題：這些元素是否在iFrame中？ – Zak

對於所有聖潔的愛，不要使用while循環。 Javascript是單線程的，當循環運行時你會阻塞所有的東西。相反，你可以這樣做。 'Temp_Image.onload =函數（）{/ * dostuff * /}; Temp_Image.src = Temp_Image.src;'或查找如何操作，在其上加載Q/A。 –

您正試圖在加載之前讀取圖像的高度和寬度。
onload將在Temp_Image完成加載時調用，因此圖像將具有寬度和高度。

Temp_Image.onload = function() { 
    console.log(Temp_Image.width); 
} 
Temp_Image.src = Select_Picture.value;

來源

2017-08-31 23:00:31

這樣做 - 不知道.onload或您可以使用它來執行內聯函數。非常感謝您恢復我平時的瘋狂。：d – Wolfy

你可以直接得到這樣的高度和寬度：

var height = document.getElementById("myImg").height; 
var width = document.getElementById("myImg").width;

來源

2017-08-31 23:01:19

即使JavaScript是單線程的，瀏覽器不是。所以，當你盡最大努力讓你的用戶系統停下來時，你的瀏覽器仍然能夠加載你的圖像，現在需要將它的屬性推送到javascript世界中供你訪問。

您的while循環將繼續跳入並阻礙瀏覽器嘗試執行的所有JavaScript相關操作，因此即使在映像準備好之後，可能需要很多個事件循環才能實際填充屬性width和height對你的形象，他們可能不會在同一個循環更新。

所以你的測試會是這樣的：（我們會假裝這是一個100像素X 100像素）

// repeat this over and over and over 
if (Temp_Image.width < 1) /* true */ 
    Image_Width = Temp_Image.width /* 0 */ 

// until finally 
if (Temp_Image.width === 0 /* false */) 
    // okay we finally branched into right side of expression 
    if (Temp_Image.height < 1) /* ??? */ 
     // what now?

那麼，如果其真正的（意爲高度尚未公佈），它看起來像這樣。

// keep repeating this over and over and over 
if (Temp_Image.width < 1) /* false */ 
    if (Temp_Image.height < 1) /* true */ 
     Image_Width = Temp_Image.width /* 100 */ 

// until finally 
if (Temp_Image.width < 1) /* false */ 
    if (Temp_Image.height < 1) /* false */ 
     break 
Image_Height = Temp_Image.height /* 100 */ 

// we've finally left the loop and the width is properly set

那麼如果它的假（意思是高度已經可用），它會看起來像這樣。

if (Temp_Image.width < 1) /* false */ 
    break 
Image_Height = Temp_Image.height /* 100 */ 

// wait... hold on... we forgot to set the width

您的寬度在循環的每次迭代遍地設置爲0，但如果height屬性已經可用，當你終於得到一個真實的寬度值，那麼你在循環的前頂部突破存儲在一個變量中。

無法保證首先設置哪個屬性（寬度或高度），正如您的50/50結果清楚地表明的那樣。

因此，如果這是爲了學習循環，然後繼續嘗試讓它自己正常工作。如果答案似乎對你不明顯，可能是一個很好的練習。

但是，如果您實際上試圖在瀏覽器中提供圖片，請不要這麼做！你正在阻止線程！停下來！

按照已經給出的傾聽load事件的建議來代替循環。

來源

2017-09-01 00:12:12 skylize

在Javascript中獲取圖像變量的高度和寬度

回答

相關問題