獲取真實圖像的寬度和高度

Question

當我使用image.width時，它將返回圖像的寬度，並在屏幕上顯示該圖像，並且我在圖像上使用max-width屬性，並且該圖像出現在某些div中。真實圖像的尺寸要大得多。是否有可能獲得真實圖像的寬度？

Answer 1

你可以通過圖像的實際尺寸使用相同的來源創建新圖像並獲得該圖像的尺寸

var img = new Image(); 

img.onload = function() { 
    var w = this.width, 
     h = this.height; 
} 

img.src = $('img')[0].src; // or whatever 

FIDDLE

Answer 2

您需要訪問它在圖像的onload事件

JS

var testImg = document.getElementById('testImg'), 
    iWidth=document.getElementById('width'), 
    iHeight = document.getElementById('height'); 

    testImg.onload = function(){ 
     console.log(this); 
     iWidth.value=this.width; 
     iHeight.value=this.height; 
    }; 

這裏是它的jsfiddle：http://jsfiddle.net/mac1175/evgP8/

Answer 3

首先，知道圖像加載異步，這意味着你必須讓你得到一個回調函數的結果編寫代碼。然後，使用沒有明確樣式的新圖像對象（因此它可以調整大小以適應本機圖像尺寸）來觸發回調。例如：

function whatWidth(url, onSize) { 
    var img = new Image(); 
    img.src = url; 
    img.onload = function() { 
    onSize(img.width, img.height); 
    } 
} 

// Now get the dimensions of an image ... 
whatWidth('http://icons.iconarchive.com/icons/deleket/keriyo-emoticons/256/Smiley-rofl-icon.png', 
    function(w, h) { 
    console.log('width x height: ', w, h); 
    } 
); 

// => Outputs "width x height: 256 256" 

值得一提的是，雖然這可能會出現需要對服務器的請求來獲取圖像（獨立於任何圖像對象，你實際上是在展示在您的網頁），只要該網址與您的網頁上的圖片相同，瀏覽器緩存將[通常]確保只有一個請求發生。

Answer 4

Dart例如在高速緩存的情況下你需要它（我知道JS提到原來的問題，但邏輯保持不變）：

class _IconSize { 
    final int width; 
    final int height; 

    _IconSize(this.width, this.height); 
} 


class IconLoader { 
    static final IconLoader _this = new IconLoader._init(); 
    factory IconLoader() => _this; 

    // Url -> dimensions. 
    final Map<String, _IconSize> _cache = {}; 

    IconLoader._init() {} 

    void withSize(String url, void onLoaded(int width, int height)) { 
    if (_cache.containsKey(url)) { 
     onLoaded(_cache[url].width, _cache[url].height); 

    } else { 
     final ImageElement img = new ImageElement(); 
     img.onLoad.listen((_) { 
     var iconSize = new _IconSize(img.width, img.height); 
     _cache[url] = iconSize; 
     withSize(url, onLoaded); 
     }); 
     img.src = url; 
    } 
    } 
}