在顯示前設置img的大小

當用戶單擊該按鈕時，畫布上的圖像將顯示在img元素中。我已經檢查過圖像的寬度是否超過了，如果是這樣，請在顯示之前調整它的大小。但是，這不起作用。當我調試它時，我意識到寬度的檢查是基於我的舊寬度而不是新寬度。在顯示前設置img的大小

<input type="button" value="Load" onclick="loadImage();" /> 
<img id="aImg" name="aImg" src="${param.src}"></img>

在Javascript中......

function loadImage() { 
    var dataURL = "http://xxx.jpg"; 
    var dis = document.getElementById("aImg"); 
    dis.crossOrigin = "anonymous"; 
    dis.src = dataURL; 

    if(dis.width > 800){ 
     dis.width = 800; 
    } 
}

我的形象顯然是超過800，但是，它仍然在其實際寬度顯示。當我調試時，dis.width實際上檢查我的舊寬度。任何方式來解決這個問題？謝謝。

來源

2013-10-18 Sky

嘗試從url創建一個新的圖像對象，並從中獲取大小。 – Shomz

我做了，但我無法從圖像對象中檢索大小。 'img.width'返回我'width（）'而不是它的實際寬度。 – Sky

這是因爲它是dis.style.width，不dis.width

編輯

對不起，貌似我誤解你的問題。我想我會以不同的方式處理這個問題，我會讓CSS爲我處理圖像的大小。看看：http://jsfiddle.net/ysGVP/2/

嘗試調整我的max-width值在我的.img-wrap css。當設定爲900px時，圖像以其正常寬度顯示。所以基本上，max-width可以用作你的「如果圖像超過X尺寸，縮小它」

這是你想要完成的？

來源

2013-10-18 17:53:12

感謝您的回答。我試過，但這會返回'寬度'，但不是它的實際寬度。 – Sky

對不起，看起來像我誤解了你的問題，我更新了我的帖子。 –

其實我想要的是在顯示時設置圖像大小的限制。我已經在我的CSS中嘗試過'max-width'，現在它工作的很好！非常感謝。祝你今天愉快。 – Sky

在顯示前設置img的大小

回答

相關問題