使用js获取图片原始尺寸
更新时间：2014年12月03日 09:38:19 投稿：hebedich
本文给大家推荐的是一个使用js获取图片的原始尺寸的例子，从本人项目中抠出来的，这里奉献给大家，有需要的直接拿走。
浏览器中显示的图片大小未必是他真实的高和宽，比如像下面这样，我们给他加上宽和高的样式
<img src="IE.png" style="width:25px;height:25px;">
这样在浏览器中显示的大小就是25px。那么我们如何获取图片的真实大小呢？，下面的代码就实现了这个功能
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</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上都测试过了，因为没有装IE6，所以没法测试。
非常好用的代码，本人大多数项目中都在使用，大家放心用吧
相关文章
这篇文章主要为大家详细介绍了JS+Canvas绘制抽奖转盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
而来到CoffeeScript的世界，美妙故事再次上演。在写了几行代码后我相信你将不会再想念原生的Javascript了。CoffeeScript包含了许多新特性，当将它与jQuery，node.js,javascript结合时，你会发现一片新天地。2015-08-08
这篇文章主要介绍了js中关于Blob对象的介绍与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了理解JavaScript中的适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下2022-08-08
html 5.0的canvas可以获取到图片的像素点了。这样，我们可以做很多以图片有关的操作和渲染了。当然今后也会给浏览器渲染引擎更高的要求。（YY, 什么时候html渲染引擎也支持多核和GPU呢？）2009-04-04
这篇文章主要为大家详细介绍了javascript实现移动端发送短信验证码案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-10-10
下面小编就为大家带来一篇js实现(全选)多选按钮的方法【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
xmlHTTP返回值重编码的优化...2006-11-11
这篇文章主要为大家详细介绍了js实现抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
javascript 操作符（~、&、|、^、<<、>>）使用案例
这篇文章主要介绍了javascript 操作符（~、&、|、^、<<、>>）使用案例,非常的全面，需要的朋友可以参考下2014-12-12
最新评论