Question

js 获取图片尺寸

<p><img id="img" src="1.jpg"/>
<br/>
<a href="javascript:;" id="a">获得图片尺寸顺便查看原图</a>
<br/>
<img id="newImg"/>
<script>
document.getElementById("a").onclick=function(){
var img=new Image();
img.src=document.getElementById("img").src;
var width=img.width,height=img.height;
alert(width+" "+height);
document.getElementById("newImg").src=img.src;
}
</script>

请问如何把这个改成：直接显示长和宽。不是点击后弹出对话框。谢谢。

Answer 1

img有onload属性，在图片加载完成时执行，这时候图片实际高度宽度可读取，从而实现自动获取宽高。

<img id="img" src="1.jpg" onload="fn()"/>
<script>
var fn=function(){
    //你的代码
}
</script>

追问

没成功。也没错误。
请问咋整？

追答

额。。。。

<img id="img" src="1.jpg" onload="fn()" onerror="alert('图片加载失败！')"/>
<script>
var fn=function(){
    //复制你的代码。。。
     var img=new Image();
     img.src=document.getElementById("img").src;
     var width=img.width,height=img.height;
     alert(width+" "+height);
     document.getElementById("newImg").src=img.src;
}
</script>

追问

我是要在页面上 直接显示长和宽。不是弹出对话框。
谢谢高手，怎么修改。

追答

哇咔咔。。。用力的插入，你懂的

<p><img id="img" src="1.jpg" onload="fn()" onerror="alert('图片加载失败！')"/>
<br/>
<!--<a href="javascript:;" id="a">获得图片尺寸顺便查看原图</a>-->
<div id="show"></div>
<img id="newImg"/>

<script>
var fn=function(){
    //复制你的代码。。。
     var img=new Image();
     img.src=document.getElementById("img").src;
     var width=img.width,height=img.height;
     //稍微改下插入
     document.getElementById("show").innerHTML=width+" x "+heigh;
     document.getElementById("newImg").src=img.src;
}
</script>

追问

提示错误：heigh未定义啊。
不能运行，咋整？

Answer 2

<p><img id="img" src="1.jpg"/>
<br/>
<a href="javascript:;" id="a">获得图片尺寸顺便查看原图</a>
<br/>
<img id="newImg"/>
<script>

 var img=new Image();
 img.src=document.getElementById("img").src;
 var width=img.width,height=img.height;
 alert(width+" "+height);
 document.getElementById("newImg").src=img.src;

</script>

追问

我是要在页面上 直接显示长和宽。不是弹出对话框。
谢谢高手，怎么修改。

追答

关键你的有个位置显示 我先用 ID 为 a 的 元素显示

<p><img id="img" src="1.jpg"/>
 
<a href="javascript:;" id="a"></a>
 
<img id="newImg"/>
<script>
 

 var img = document.getElementById("img");
 var width=img.width,height=img.height;

 document.getElementById("a").innerHTML="宽："width+" ，高："+height;
 
</script>

追问

没成功，提示缺少;

追答

<p><img id="img" src="1.jpg"/>
  
<a href="javascript:;" id="a"></a>
  
<img id="newImg"/>
<script>
  
 
 var img = document.getElementById("img");
 var width=img.width,height=img.height;
 
 document.getElementById("a").innerHTML="宽："+width+" ，高："+height;
  
</script>

Answer 3

img.offsetWidth and img.offsetHeith