使用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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
Vue如何循环提取对象数组中的值
Nov 18 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php实现文件预览功能
2017/05/23 PHP
PHP实现微信退款功能
2018/10/02 PHP
javascript Excel操作知识点
2009/04/24 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js导出txt示例代码
2014/01/14 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python中kmeans聚类实现代码
2018/02/23 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
python中upper是做什么用的
2020/07/20 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
STP的判定过程
2012/10/01 面试题
机电专业大学生职业规划书范文
2014/02/25 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Java基础-封装和继承
2021/07/02 Java/Android
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技