javascript獲取圖片的真實寬度和高度

antzone發表於2017-03-29
JavaScript

本章節介紹一下如何獲取圖片的真是寬度和高度。

可能很多初學者對於真實的尺寸有點疑問，先看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<img src="softwhy.jpg" width="200" height="100"/>

看到上面的程式碼以後，你能說圖片的真實尺寸是200px和100px,顯然不是，這是人為規定的。

下面就通過程式碼例項介紹一下如何獲取圖片的真實尺寸。

程式碼如下:

[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 oimg=document.getElementsByTagName("img")[0];
  var oshow=document.getElementById("show");
  var realWidth;//真實的寬度
  var realHeight;//真實的高度
  var imgtemp=new Image();//建立一個image物件
  imgtemp.src=oimg.src;
  oshow.innerHTML="寬度:"+imgtemp.width+"<br/>"
  +"高度:"+imgtemp.height;
}
</script>
</head>
<body>
<div id="show"></div>
<img src="mytest/jQuery/big.jpg" width="200" height="100"/>
</body>
</html>

上面的程式碼實現了我們的要求，可以獲取圖片真實的尺寸。

方式也是非常的簡單，就是建立一個Image物件，通過這個物件獲取尺寸就可以了。

相關文章