加載後爲什麼我沒有獲取圖像的寬度和高度？

我是一個圖像元素。我讓用戶上傳圖片。上傳後，我處理圖像。我想加載處理後的圖像並顯示它。我得到並顯示圖像就好。加載後爲什麼我沒有獲取圖像的寬度和高度？

我還需要知道加載的圖像的寬度和高度。

我這樣做正確如下，它應該工作，但不知道爲什麼我得到的寬度和高度是0：

HTML：

<img id="photo" src="">

JS：

var id = 1000; 
    var img = $("#photo").attr('src', '/photo/get/' + id) 
    .on('load', function() { 
      var w = 0; 
      var h = 0; 
      if (!this.complete || typeof this.naturalWidth === "undefined" || this.naturalWidth === 0) { 
       alert("Could not load image"); 
      } 
      else { 
       alert('Image loaded'); 
       w = $(this).width(); 
       h = $(this).height(); 
       alert("width=" + w + " height=" + h);//PRINTS 0, 0, WHY??? 
      } 
    });

來源

2015-10-03 kheya

所有瀏覽器都發生這種情況嗎？ http://stackoverflow.com/q/32606323/3168107 – Shikkediel

你確定圖片加載正確嗎？此https://jsfiddle.net/82mkom0q/在IE，FF和Chtome中正確顯示尺寸 –

在我的應用程序中正確加載。我看到圖像很好。 – kheya

jQueryObject.width()將返回目標元素的computedStyle。
如果在CSS中強制使用此元素的值width和height，那麼它將返回這些強制值。

你需要什麼，如果你想獲得加載圖像的大小，是檢查你的<img>元素的naturalWidth和naturalHeight屬性：

w = this.naturalWidth; 
h = this.naturalHeight;

來源

2015-10-03 03:06:35 Kaiido

我嘗試過很多辦法，你的道：

使用 .load（）

var img = $("#photo").attr('src', '/photo/get/' + id) 
    .on('load', function() { 

Output: Nothing.

：

使用

。就緒（）：

var img = $("#photo").attr('src', '/photo/get/' + id) 
    .ready(function() { 

Output: "Could not load image".

所以它沒有工作。也許有東西在那裏。

但是，當我使用，

var img = $("#photo").attr('src', '/photo/get/' + id) 
    .on('click', function() { 

Output: "Image loaded";"width=280 height=160".

它的工作完美地給予適當的高度和寬度。在你的代碼中沒有bug（「load」，）或load（）。

P.S. jQuery：ver：1.11.3。瀏覽器：IE：11.0，Firefox：40.0，Opera：32.0

來源

2015-10-03 03:40:02

加載後爲什麼我沒有獲取圖像的寬度和高度？

回答

相關問題