js如何獲取圖片的真實尺寸

antzone發表於2017-03-23
JS

在實際應用中，可能需要獲取圖片的實際尺寸，但是有時候並不能夠實現我們的要求。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var img=document.getElementById("theimg");
  var oshow=document.getElementById("show");
  oshow.innerHTML=img.width;
}
</script> 
</head> 
<body> 
<div id="show"></div>
<div><img id="theimg" src="mytest/demo/tree.jpg" width="50" height="50"/></div>
</body> 
</html>

以上程式碼能夠輸出圖片的寬度，但是這個寬度是width屬性規定的寬度，並不一定是實際寬度，下面介紹一下如何獲取指定圖片的真實尺寸，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var img=document.getElementById("theimg");
  var oshow=document.getElementById("show");
  var image=new Image(); 
  image.src=img.src; 
  var naturalWidth=image.width; 
  oshow.innerHTML=naturalWidth;
}
</script> 
</head> 
<body> 
<div id="show"></div>
<div><img id="theimg" src="mytest/demo/tree.jpg" width="50" height="50"/></div>
</body> 
</html>

以上程式碼可以準確獲取圖片的真實寬度，這裡就是重新建立一個新的Image物件，然後再使用width屬性獲取。

使用html5也可以實現此功能，這裡就不多介紹了，具體可以參閱HTML5獲取圖片的原始高度簡單介紹一章節。 

相關文章