可以在javascript的imagearray中設置圖像的大小？

可以在javascript的imagearray中設置圖像的高度和寬度？可以在javascript的imagearray中設置圖像的大小？

imagearray: [ 
     ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "My Text"], 
     ["http://i29.tinypic.com/xp3hns.jpg", "", "", "My Text"], 
     ["http://i30.tinypic.com/531q3n.jpg"], 
     ["http://i31.tinypic.com/119w28m.jpg", "", "", "My Text"] 
],

這裏的圖像是在不同的高度和寬度。
我的魔杖設置在固定尺寸的圖像高度和寬度（例如：400 * 400）

來源

2009-09-26 Alex

我不確定我是否完全理解您的問題 - 您是否可以對其進行編輯以提供有關您想要實現的更多信息？ – 2009-09-26 12:00:16

我不認爲試圖解決這個在JavaScript是正確的做法。你實際上沒有任何圖像在你的數組中，你有URL。如果你希望用JavaScript處理圖像，那麼你將不得不取得圖像，並將它們轉換爲實際可用的數據。這是可能的，但它會很多工作，因爲在JavaScript中沒有任何內置的圖像處理原語。

更好的方法可能是將圖像放入頁面的HTML中，然後依靠瀏覽器本身爲您完成工作。插入圖像元素到您的網頁，並指定寬度和高度，瀏覽器將圖像縮放到適合你：

var elImage = document.createElement("img"); 
elImage.src = "http://i26.tinypic.com/11l7ls0.jpg"; 
elImage.height = 400; 
elImage.width = 400; 
elImage.alt = ""; 
document.getElementById("myImageContainer").appendChild(elImage);

上述假設你有id爲myImageContainer一個div粘在圖像它。可以很容易地適應循環，您可以將您的陣列中的每個圖像依次添加到頁面中。但是，如果這是你在做什麼，你可能也只是堅持在圖像中的HTML，而不是使用JavaScript亂搞：

<img src="http://i26.tinypic.com/11l7ls0.jpg" height="400" width="400" alt="" />

這種方法（或者編寫腳本或直接到HTML的主要問題）是因爲它不能保留長寬比，所以你的圖像可能會被壓扁。如果你想避免這種情況，那麼你可能想要使用javascript：將圖像加載到你的頁面，檢測它的'自然'高度和寬度，然後使用簡單的算術來縮放到適合寬度和高度的東西，或縮放，以便至少一個是，並在具有固定寬度和高度以及要裁剪的樣式overflow: hidden的div內顯示圖像。

來源

2009-09-26 17:49:29 robertc

只需指定其中一個尺寸的大小，即可避免縱橫比問題。例如。如果您有800w x 600h的源圖像，請將寬度設置爲400並省略高度屬性，瀏覽器會將高度縮放到300.我最近使用此技術讓瀏覽器根據各種尺寸的輸入顯示比例正確的縮略圖圖像不知道輸入大小，並且不生成單獨的縮略圖圖像。 – Val 2009-09-26 18:11:51

好的提示，我沒有提到它，因爲它只適用於風景圖片。如果源圖片是800wx1200h，並將寬度設置爲400，則生成的圖片將爲600px高，因此超過400px高度要求。在這一點上，你最好做一些更一般的事情，就像我在最後一段中討論的那樣。當然，如果您可以保證所有圖片都是橫向格式，那麼您就是更簡單的解決方案。 – robertc 2009-09-26 19:49:17

好點;我忽略了他想限制寬度和高度。如果您沒有身高限制（反之亦然），則該技術適用於橫向或縱向圖像。當我生成縮略圖時，我不在乎它們會有多深，所以我設置了寬度= 40，省略了高度，400x800將會變爲40x80，而800x400會變爲40x20。我想，如果我不得不檢查源寬度或高度是大於和縮放，爲了通過該約束，那麼我不妨calc下第二值以及代替省略它和使瀏覽器數字出來的。 – Val 2009-09-27 00:26:47

可以在javascript的imagearray中設置圖像的大小？

回答

相關問題