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

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 获取图片尺寸及放大图片