首页 > 网络编程 > JavaScript > javascript技巧 > js 获取图片尺寸

javascript 获取图片尺寸及放大图片

2013-09-04 08:44:06 作者：

获取图片尺寸(不设置宽高)及放大图片：利用了IE的私有属性防止图片放大失真严重！感兴趣的朋友可以参考下

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只是只读属性，不能用来设置图片的大小，不能持续放大。

javascript 获取图片尺寸及放大图片

您可能感兴趣的文章: