javascript如何獲取img圖片的尺寸

admin發表於2017-04-01
JavaScript

本章節介紹一下如何獲取img圖片的尺寸，希望能夠給需要的朋友帶來一定的幫助。

之所以介紹這個，是因為獲取圖片的尺寸實際上有兩種，一種是獲取的img標籤的尺寸，一種是獲取圖片的真實尺寸。

一.獲取img標籤的尺寸:

所謂img標籤的尺寸就是定義在<img>標籤上的尺寸，這個可以是隨意設定的。

特別說明:img標籤上的尺寸不一定是圖片的真實尺寸，除非img沒有規定width和height屬性值。

程式碼例項:

[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.getElementById("img");
  var odiv=document.getElementById("show");
  odiv.innerHTML=oimg.width;
}
</script> 
</head> 
<body>
<img id="img" src="demo/CSS/img/map.jpg" width="200">
<div id="show"></div>
</body> 
</html>

上面的程式碼獲取的img標籤的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 odiv=document.getElementById("show");
  var img=new Image();
  img.src="demo/CSS/img/map.jpg";
  img.onload=function(){
    odiv.innerHTML=img.width;
  }
}
</script> 
</head> 
<body>
<div id="show"></div>
</body> 
</html>

建立Image物件的方式可以圖片真實的尺寸。

相關文章