javascript 獲取圖片尺寸及放大圖片

2019-11-20 22:20:16

字體：大中小

來源：轉載

供稿：網友

1)獲取圖片尺寸

 
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/> 
<script> 
function getWH(t){ 
//DOM屬性 
console.log("width="+t.width);//200 
console.log("height="+t.height);//300 
//操作樣式 
console.log("styleWidth="+t.style.width);//空 
console.log("styleHeight="+t.style.height);//空 
} 

2)獲取圖片尺寸(不設置寬高)

復制代碼代碼如下:

 
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)"/> 
<script> 
function getWH(t){ 
//DOM屬性 
console.log("width="+t.width);//200 
console.log("height="+t.height);//300 
//操作樣式 
console.log("styleWidth="+t.style.width);//空 
console.log("styleHeight="+t.style.height);//空 
} 

我們只要不在style中顯式地設置它，寬高永遠為空！

3)放大圖片：

這里我們利用了IE的私有屬性防止圖片放大失真嚴重！

復制代碼代碼如下:

 
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/> 
<script> 
function getWH(t){ 
t.width *= 2; 
t.height *= 2; 
//每點擊一次，寬高放大一倍 
} 
</script> 

4)在FF與谷歌中，我們還可以用naturalWidth與naturalHeight取得圖片的原大小！

復制代碼代碼如下:

 
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/> 
<script> 
function getWH(t){ 
console.log("width="+t.naturalWidth); 
console.log("height="+t.naturalHeight); 
t.width = t.naturalWidth * 2; 
t.height = t.naturalHeight * 2; 
} 
</script> 

naturalWidth和naturalHeight只是只讀屬性，不能用來設置圖片的大小，不能持續放大。