编程 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 相关文章推荐

给Javascript数组插入一条记录的代码

Aug 30 Javascript

一个cssQuery对象 javascript脚本实现代码

Jul 21 Javascript

匹配任意字符的正则表达式写法

Apr 29 Javascript

在JS中如何调用JSP中的变量

Jan 22 Javascript

JavaScript实现的购物车效果可以运用在好多地方

May 09 Javascript

jQuery创建DOM元素实例解析

Jan 19 Javascript

javascript实现客户端兼容各浏览器创建csv并下载的方法

Mar 23 Javascript

js实现索引图片切换效果

Nov 21 Javascript

Bootstrap教程JS插件弹出框学习笔记分享

May 17 Javascript

关于验证码在IE中不刷新的快速解决方法

Sep 23 Javascript

js多个物体运动功能实例分析

Dec 20 Javascript

基于vue-cli、elementUI的Vue超简单入门小例子（推荐）

Apr 17 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异常：Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE eval()'d code error

2011/05/19 PHP

php连接odbc数据源并保存与查询数据的方法

2014/12/24 PHP

10款实用的PHP开源工具

2015/10/23 PHP

PHP的AES加密算法完整实例

2016/07/20 PHP

解决PHP使用CURL发送GET请求时传递参数的问题

2019/10/11 PHP

PHP设计模式概论【概念、分类、原则等】

2020/05/01 PHP

javascript 冒号使用说明

2009/06/06 Javascript

js select常用操作控制代码

2010/03/16 Javascript

javascript基础知识大集锦(一) 推荐收藏

2011/01/13 Javascript

简单的jquery拖拽排序效果实现代码

2011/09/20 Javascript

javascript 三种方法实现获得和设置以及移除元素属性

2013/03/20 Javascript

js中判断用户输入的值是否为空的简单实例

2013/12/23 Javascript

javascript/jquery获取地址栏url参数的方法

2014/03/05 Javascript

ajaxfileupload.js实现上传文件功能

2019/04/19 Javascript

利用百度echarts实现图表功能简单入门示例【附源码下载】

2019/06/10 Javascript

[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛，今年他又会有什么样的战绩？

2018/04/06 DOTA

[01:14]DOTA2 7.22版本新增神杖效果展示（智力英雄篇）

2019/05/29 DOTA

使用Python & Flask 实现RESTful Web API的实例

2017/09/19 Python

python中实现数组和列表读取一列的方法

2018/04/03 Python

django中的图片验证码功能

2019/09/18 Python

使用Python的datetime库处理时间(RPA流程)

2019/11/24 Python

Python中包的用法及安装

2020/02/11 Python

FOREO官方网站：LUNA露娜洁面仪

2016/11/28 全球购物

生产车间主管岗位职责

2013/12/28 职场文书

绿色环保家庭事迹材料

2014/08/31 职场文书

党员评议表自我评价范文

2014/10/20 职场文书

2014年社区个人工作总结

2014/12/02 职场文书

安全生产先进个人事迹材料

2014/12/30 职场文书

2015年重阳节慰问信

2015/03/23 职场文书

2015年行政助理工作总结

2015/04/30 职场文书

2015年乡镇纪委工作总结

2015/05/26 职场文书

2015年评职称个人工作总结

2015/10/15 职场文书

2019年“我为祖国点赞”演讲稿（3篇）

2019/09/26 职场文书

php 防护xss,PHP的防御XSS注入的终极解决方案

2021/04/01 PHP

Python连接Postgres/Mysql/Mongo数据库基本操作大全

2021/06/29 Python

漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开

2022/04/05 日漫