编程 Javascript

使用js获取图片原始尺寸

Posted in Javascript onDecember 03, 2014

浏览器中显示的图片大小未必是他真实的高和宽，比如像下面这样，我们给他加上宽和高的样式

这样在浏览器中显示的大小就是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，所以没法测试。

非常好用的代码，本人大多数项目中都在使用，大家放心用吧

使用js获取图片原始尺寸

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个JS小玩意几个属性相加不能超过一个特定值.

Sep 29 Javascript

JQuery判断HTML元素是否存在的两种解决方法

Dec 26 Javascript

jquery中checkbox全选失效的解决方法

Dec 26 Javascript

深入理解JavaScript系列（38）：设计模式之职责链模式详解

Mar 04 Javascript

javascript合并表格单元格实例代码

Jan 03 Javascript

prototype.js常用函数详解

Jun 18 Javascript

js正则表达式惰性匹配和贪婪匹配用法分析

Dec 26 Javascript

折叠菜单及选择器的运用

Feb 03 Javascript

关于js中的鼠标事件总结

Jul 11 Javascript

Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例

Sep 30 Javascript

React 无状态组件(Stateless Component) 与高阶组件

Aug 14 Javascript

JS 自执行函数原理及用法

Aug 05 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 CLI实现简单的数据库实时监控调度

2009/07/01 PHP

深入解析php中的foreach函数

2013/08/31 PHP

php计算当前程序执行时间示例

2014/04/24 PHP

destoon实现VIP排名一直在前面排序的方法

2014/08/21 PHP

php中$_POST与php://input的区别实例分析

2015/01/07 PHP

WordPress中注册菜单与调用菜单的方法详解

2015/12/18 PHP

浅谈PHP array_search 和 in_array 函数效率问题

2019/10/15 PHP

php实现JWT验证的实例教程

2020/11/26 PHP

基于jquery封装的一个js分页

2011/11/15 Javascript

THREE.JS入门教程(1)THREE.JS使用前了解

2013/01/24 Javascript

javascript禁制后退键(Backspace)实例代码

2013/11/15 Javascript

js特殊字符过滤的示例代码

2014/03/05 Javascript

javascript的创建多行字符串的7种方法

2014/04/29 Javascript

jQuery循环动画与获取组件尺寸的方法

2015/02/02 Javascript

浅谈JavaScript for循环闭包

2016/06/22 Javascript

angularJs关于指令的一些冷门属性详解

2016/10/24 Javascript

nodejs中全局变量的实例解析

2017/03/07 NodeJs

浅谈angularJS的$watch失效问题的解决方案

2017/08/11 Javascript

Vue 监听列表item渲染事件方法

2018/09/06 Javascript

Vue中Quill富文本编辑器的使用教程

2018/09/21 Javascript

微信小程序定义和调用全局变量globalData的实现

2019/11/01 Javascript

JavaScript的console命令使用实例

2019/12/03 Javascript

js实现上传按钮并显示缩略图小轮子

2020/05/04 Javascript

理解JavaScript中的Proxy 与 Reflection API

2020/09/21 Javascript

django 自定义用户user模型的三种方法

2014/11/18 Python

利用Python实现在同一网络中的本地文件共享方法

2018/06/04 Python

Django项目中使用JWT的实现代码

2019/11/04 Python

Python实现把多维数组展开成DataFrame

2019/11/30 Python

经济实惠的豪华家具：My-Furniture

2019/03/12 全球购物

商务专员岗位职责范本

2014/06/29 职场文书

英语专业求职信

2014/07/08 职场文书

乡镇食品安全责任书

2014/07/28 职场文书

2015年检验员工作总结范文

2015/04/30 职场文书

2016关于预防职务犯罪的心得体会

2016/01/21 职场文书

仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案

2021/05/06 MySQL

shell进度条追踪指令执行时间的场景分析

2022/06/16 Servers