使用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 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
DOM 事件流详解
Jan 20 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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 Static关键字实用方法
2010/06/04 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
小学家长会邀请函
2014/01/23 职场文书
委托书范文
2014/04/02 职场文书
班级文化建设标语
2014/06/23 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
停发工资证明范本
2015/06/12 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript