如何使用javascript或jquery獲取圖片的自然尺寸？

我到目前爲止這樣的代碼：如何使用javascript或jquery獲取圖片的自然尺寸？

var img = document.getElementById('draggable'); 
var width = img.clientWidth; 
var height = img.clientHeight;

然而，這讓我的HTML屬性 - CSS樣式。我想獲取文件的實際圖像資源的尺寸。

我需要這個，因爲在上傳圖片時，它的寬度設置爲0px，我不知道爲什麼或者發生了什麼。爲了防止它，我想獲得實際的維度並重置它們。這可能嗎？

編輯：即使當我試圖得到naturalWidth我得到0作爲結果。我添加了一張照片。奇怪的是，它只發生在我上傳新文件和刷新時，它應該像它應該那樣工作。

http://oi39.tinypic.com/3582xq9.jpg

來源

2013-05-02 user1848605

看看[這裏]（http://stackoverflow.com/a/626505/6190800 ）解決方案 – 2016-10-20 15:16:36

你可以使用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

來源

2013-05-02 16:20:24 adeneo

沒有jQuery讓我開心:-) – 2013-05-02 16:22:17

這解決了它，謝謝。包裝我的代碼jQuery.ready（）功能不夠，因爲圖像沒有被加載？僅當將新文件上傳到服務器時，我遇到了這個問題。 – user1848605 2013-05-02 16:31:39

當jQuery DOM ready函數觸發時，圖像不會被加載，只有DOM準備就緒。 '$（window）.on（'load'）'將在所有內容加載時觸發，但只需將onload事件處理程序直接附加到圖像上會更好。 – adeneo 2013-05-02 16:33:41

有img.naturalHeight和img.naturalWidth，給你的寬度和圖像本身的高度，而不是DOM元素。

來源

2013-05-02 16:18:57 mash

這是一個非常好的解決方案。 – SoonDead 2013-05-02 16:23:27

據我所知，它不能在IE8或更低版本中運行，也不能在Opera中運行。 – adeneo 2013-05-02 16:23:59

有趣。請注意，對於IE，這是針對IE9或更高版本的。我查了一會兒，偶然發現了這個爲jQuery添加'.naturalHeight（）'和'.naturalWidth（）'的代碼片段。只是想我可以在這裏分享這個信息：http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/ – 2013-05-02 16:25:02

您可以使用我所做的以下功能。

功能

function getImageDimentions(imageNode) { 
    var source = imageNode.src; 
    var imgClone = document.createElement("img"); 
    imgClone.src = source; 
    return {width: imgClone.width, height: imgClone.height} 
}

HTML：

<img id="myimage" src="foo.png">

使用這樣

var image = document.getElementById("myimage"); // get the image element 
var dimentions = getImageDimentions(image); // get the dimentions 
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions

來源

2015-12-01 14:36:59 nathnolt

如何使用javascript或jquery獲取圖片的自然尺寸？

回答

相關問題