調整大小后獲取實際圖像大小

Question

我有一個充滿縮略圖的頁面，用 css 調整大小為150x150 ，當我單擊縮略圖時，頁面變暗，並且圖像以真實大小顯示。

目前，我必須手動創建一個包含所有圖像實際高度的數組。 為了解決我的畫廊的設計問題+較少的手動操作，我需要在調整圖像大小（CSS）后獲取圖像的實際高度。

我試過了：

var imageheight = document.getElementById(imageid).height;

和：

var imageheight = $('#' + imageid).height();

但兩者都返回由 CSS 分配的150px屬性。 我該如何解決這個問題？ 謝謝

Answer 1

你有“自然”的知識來幫助你：

與js：

var imageheight = document.getElementById(imageid).naturalHeight;

或使用 jquery

var imageheight = $('#' + imageid).naturalHeight;

Answer 2

一種方法是創建一個單獨的圖像對象。

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

這樣，您將使用相同的圖像，但不會使用 DOM 上已修改尺寸的圖像。 據我所知，緩存的圖像將使用這種方法回收。 所以不用擔心額外的 HTTP 請求。

Answer 3

naturalHeight僅使用naturalHeight和naturalWidth屬性的答案很棒，可能應該是公認的答案。

只是想在這里添加兩件可以節省人們數小時的事情，因為我看到很多關於這個問題的 SO 帖子並且我自己花了很多時間在它上面。

1. 如果在加載圖像之前調用naturalHeight可能返回0或undefined 。 僅設置src屬性可能並不意味着立即加載圖像。 我已經看到最好在onload獲取它。

    $('selector')[0].onload = function() { alert(this.naturalHeight); alert(this.naturalWidth); }

2. 如果不使用this ，只是$('selector').naturalHeight可能不起作用。 您可能需要訪問關聯的 DOM 元素，即$('selector')[0].naturalHeight或$('selector').get(0).naturalHeight因為我們使用的是原生 Javascript 的屬性naturalHeight 。 有關更多詳細信息，請參閱此 SO 帖子。