HTML5 - 如何獲取圖像尺寸

我有這個腳本，它用於獲取瀏覽器上傳圖像的寬度和高度。HTML5 - 如何獲取圖像尺寸

參考：http://renevier.net/misc/resizeimg.html

function createReader(file) { 
    reader.onload = function(evt) { 
     var image = new Image(); 
     image.onload = function(evt) { 
      var width = this.width; 
      var height = this.height; 
      alert (width); // will produce something like 198 
     }; 
     image.src = evt.target.result; 
    }; 
    reader.readAsDataURL(file); 
} 

for (var i = 0, length = input.files.length; i < length; i++) { 
    createReader(input.files[i]); 
}

我想從createReader函數外部訪問該值寬度和高度。我怎樣才能做到這一點？

來源

2011-03-02 angry kiwi

嗯...有'createReader'返回的東西。這是一個好的開始。 –

var width和height只能訪問image.onload函數內部，這就是爲什麼我不能「返回某些東西」 –

您不能在要返回它們的範圍中創建變量'width'和'height' ，比如'createReader'函數？ –

改變「createReader」，讓你在處理函數傳遞到被調用時，圖像可用：

function createReader(file, whenReady) { 
    reader.onload = function(evt) { 
     var image = new Image(); 
     image.onload = function(evt) { 
      var width = this.width; 
      var height = this.height; 
      if (whenReady) whenReady(width, height); 
     }; 
     image.src = evt.target.result; 
    }; 
    reader.readAsDataURL(file); 
}

現在，當你調用它，你可以傳遞一個函數做什麼是你想要完成的圖像尺寸：

createReader(input.files[i], function(w, h) { 
    alert("Hi the width is " + w + " and the height is " + h); 
    });

來源

2011-03-02 22:08:09 Pointy

夢幻般的答案。如果我可以給10個upvotes，我會！ whenReady真的幫助了我，因爲我不知道爲什麼有時候高度的檢索有效，有時候並沒有。有關何時使用whenReady類型處理程序的進一步解釋。爲什麼使用File API讀取文件需要它？ –

@ kimsia很多這樣的API都是**異步** - 當你調用它們時，一系列事件被設置爲運動，但它不會立即發生。「回調」機制可以讓您在長期操作完成時將代碼運行。網絡操作，文件系統交互以及其他類似的東西是異步的，因爲這些東西涉及的硬件現實不是直接的。 – Pointy

HTML5 - 如何獲取圖像尺寸

回答

相關問題