使用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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
动态加载js文件简单示例
Apr 21 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
上传文件返回的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启用zlib压缩文件的配置方法
2013/06/12 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PDO::setAttribute讲解
2019/01/29 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python中对列表排序实例
2015/01/04 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python2和python3哪个使用率高
2020/06/23 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
受资助学生感谢信
2015/01/21 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android