使用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无缝滚动代码
Jan 03 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
js实现全选和全不选功能
Jul 28 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
深入分析php之面向对象
2013/05/15 PHP
深入php多态的实现详解
2013/06/09 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python创建字典的八种方式
2019/02/27 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
医院办公室主任职责
2013/12/29 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
如何写好闭幕词
2019/04/02 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python