使用js获取图片原始尺寸


Posted in Javascript onDecember 03, 2014

浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式

<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,所以没法测试。

非常好用的代码,本人大多数项目中都在使用,大家放心用吧

Javascript 相关文章推荐
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 #Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 #Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 #Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
You might like
PHP VS ASP
2006/10/09 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
tab栏切换原理
2017/03/22 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python unittest单元测试框架总结
2018/09/08 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
如何在python中执行另一个py文件
2020/04/30 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
毕业生实习鉴定
2013/12/11 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
上班迟到检讨书
2014/01/10 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
采购部经理岗位职责
2014/02/10 职场文书
运动会跳远加油稿
2014/02/20 职场文书
毕业评语大全
2014/05/04 职场文书
小学教师读书笔记
2015/07/01 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
linux目录管理方法介绍
2022/06/01 Servers