如何使用 JavaScript 或 jQuery 來取得影像的自然尺寸？

Question

到目前為止我有這個程式碼：varimg=document.getElementById('draggable');varwidth=img.clientWidth;varheight=img.clientHeight;然而，這讓我獲得了html屬性-css樣式。我想獲取文件的實際圖像資源的尺寸。我需要這個，因為上傳圖像後，它的寬度被設定為0px，我不知道為什麼或在哪裡發生這種情況。為了防止這種情況，

P粉239164234 · Answer

有 img.naturalHeight 和 img.naturalWidth 為您提供圖像本身的寬度和高度，而不是 DOM 元素。

P粉148434742 · Answer

您可以使用naturalWidth和naturalHeight，這些屬性包含圖像的實際的、未修改的寬度和高度，但您必須等到圖像加載得到他們

var img = document.getElementById('draggable');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

此功能僅支援IE9以上版本，如果您必須支援舊版瀏覽器，您可以建立一個新圖像，將其來源設定為相同的圖像，如果不修改圖像的大小，它將返回圖像的自然尺寸，因為當沒有給出其他尺寸時，這將是預設尺寸

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

FIDDLE