使用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插件开发中的extend方法
Nov 19 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
php基于redis处理session的方法
Mar 14 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
js中的闭包学习心得
Feb 06 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
layui前端时间戳转化实例
Nov 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
纯javascript版日历控件
2016/11/24 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
原生js实现日历效果
2020/03/02 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python守护线程用法实例
2017/06/23 Python
django反向解析和正向解析的方式
2018/06/05 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python实现对输入的密文加密
2019/03/20 Python
python单例设计模式实现解析
2020/01/07 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python如何快速生成时间戳
2020/07/21 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
销售团队激励口号
2014/06/06 职场文书
股指期货心得体会
2014/09/10 职场文书
合伙购房协议样本
2014/10/06 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
电话营销开场白
2015/05/29 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA