javascript获取图片宽度高度简单介绍

本章节介绍一下如何获取图片的真是宽度和高度。

可能很多初学者对于真实的尺寸有点疑问，先看一段代码:

[ bootstrap ] 运行代码下载代码

<script>
<img src="softwhy.jpg" width="200" height="100"/>
</script>

看到上面的代码以后，你能说图片的真实尺寸是200px和100px,显然不是，这是人为规定的。

下面就通过代码实例介绍一下如何获取图片的真实尺寸。

代码如下:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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>

代码描述：javascript获取图片宽度高度。javascript获取图片宽度高度简单介绍

下载全部收藏

139 185

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册