獲取圖像尺寸

我遇到了獲取圖像尺寸的問題。我想知道圖像的寬度和高度，而無需將其加載到文檔中。目前我有代碼如下：獲取圖像尺寸

function getImageSize (path) { 
    var image = new Image(); 
    image.name = path; 
    var d = image.onload = function() { 
    var w = this.width; 
    var h = this.height; 
    return {width : w, height : h}; 
    }(); 
    image.src = path; 
    return d; 
}

如果我調用該函數，我得到對象在兩個索引含有未定義的（W，H）。我試過不通過排除括號（8行）來調用onload處理程序，但我得到的是函數代碼。

請注意，如果我在onload處理程序體內調用alert(w)，我可以看到圖片的寬度，但不在其外部。

有人知道如何解決這個問題嗎？我如何獲得圖像尺寸？

來源

2013-03-17 Damian Czapiewski

此塊

var d = image.onload = function() { 
    var w = this.width; 
    var h = this.height; 
    return {width : w, height : h}; 
}();

看起來非常可疑。這實際上是執行功能立即和分配對象{width : w, height : h}到image.onload和d。 w和h將包含窗口的寬度和高度，因爲this將參考window。

您必須將函數分配給image.onload，而不是執行它。您必須分配函數的原因是，加載圖像需要時間，並且圖像加載後會調用回調。整個過程是異步。這也意味着你不能返回圖像的尺寸從getImageSize。您必須使其接受回撥，您必須撥打load回撥。

例如：

function getImageSize (path, callback) { 
    var image = new Image(); 
    image.name = path; 
    image.onload = function() { 
    callback({width : this.width, height : this.height}; 
    } 
    image.src = path; 
};

，並呼籲與

getImageSize('path/to/image', function(dim) { 
    // do something with dim.width, dim.height 
});

功能看一看的my answer here第一部分了解的同步和異步代碼的差異，回調的作用。

來源

2013-03-17 11:14:31

我試過回調但仍然無法返回值。 – 2013-03-17 12:29:34

正如我所說，你不能返回尺寸。引用自己：*「這也意味着你**不能**從'getImageSize' * *返回圖像的尺寸。所有需要訪問維度的代碼都必須從回調中調用。 – 2013-03-17 12:42:02

onload是一個異步調用，不能返回任何有用的調用函數。

您將不得不使用全局變量和計時器檢查來等待函數完成，然後訪問這些值。

來源

2013-03-17 11:14:54 ATOzTOA

獲取圖像尺寸

回答

相關問題