js怎么获取图片原始大小

发布时间:2020-04-15编辑:脚本学堂
如何用js获取图片原始大小,js脚本获取图片的真实大小,设置延时保证图片加载完成。

在浏览器中显示的图片,有时考虑了页面效果的需要,为适当绽放宽高,以保证不影响用户体验,例如,加上宽和高的样式:
 

<img src="IE.png" style="width:25px;height:25px;">
 

在浏览器中显示的大小就是25px。

如何获取图片的真实大小,用js代码获取图片原始尺寸的方法。

代码:
 

复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>取图片原始大小 - WWW.jb200.com</title>
</head>
<body>
<img src="IE.png" id="image" style="width:25px;height:25px;">    
<script>
// 设置延时保证图片加载完成
setTimeout(function() {
var
real_width,
real_height,
_im         = document.getElementById('image'),
im          = document.createElement('img');
im.src      = _im.src,
real_width  = im.width,
real_height = im.height;
alert(real_width+'n'+real_height);
},500);
</script>
</body>
</html>
 

以上代码,在IE7+和chrome测试通过。