编程 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语法着色引擎（demo及打包文件下载）

Jun 13 Javascript

checkbox选中与未选中判断示例

Aug 04 Javascript

Javascript学习笔记之数组的遍历和 length 属性

Nov 23 Javascript

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

May 11 Javascript

jQuery实现新消息在网页标题闪烁提示

Jun 23 Javascript

node.js操作mysql(增删改查)

Jul 24 Javascript

JS模仿编辑器实时改变文本框宽度和高度大小的方法

Aug 17 Javascript

手机端转盘抽奖代码分享

Sep 10 Javascript

JavaScript实现星级评分

Jan 12 Javascript

javascript中mouseenter与mouseover的异同

Jun 06 Javascript

微信小程序拍照和摄像功能实现方法示例

Feb 01 Javascript

JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)

Feb 03 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桌面中心(一) 创建数据库

2007/03/11 PHP

PHP写MySQL数据实现代码

2009/06/15 PHP

fleaphp rolesNameField bug解决方法

2011/04/23 PHP

php 计划任务检测用户连接状态

2012/03/29 PHP

使用cookie实现统计访问者登陆次数

2013/06/08 PHP

php使用json_encode对变量json编码

2014/04/07 PHP

PHP函数getenv简介和使用实例

2014/05/12 PHP

ThinkPHP里用U方法调用js文件实例

2015/06/18 PHP

PHP大文件分割分片上传实现代码

2020/12/09 PHP

js 刷新页面的代码小结推荐

2010/04/02 Javascript

关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题

2012/03/01 Javascript

Javascript中valueOf与toString区别浅析

2013/03/19 Javascript

用js来获取上传的文件名纯粹是为了美化而用

2013/10/23 Javascript

jQuery插件开发的五种形态小结

2015/03/04 Javascript

浅析jquery unbind()方法移除元素绑定的事件

2016/05/24 Javascript

vue中子组件向父组件传递数据的实例代码(实现加减功能)

2018/04/20 Javascript

ES6使用export和import实现模块化的方法

2018/09/10 Javascript

发布订阅模式在vue中的实际运用实例详解

2019/06/09 Javascript

微信小程序实现下拉刷新动画

2019/06/21 Javascript

[00:57]深扒TI7聊天轮盘语音出处5

2017/05/11 DOTA

CentOS 6.X系统下升级Python2.6到Python2.7 的方法

2016/10/12 Python

TensorFlow在MAC环境下的安装及环境搭建

2017/11/14 Python

Python 处理图片像素点的实例

2019/01/08 Python

从0开始的Python学习016异常

2019/04/08 Python

python使用tkinter库实现五子棋游戏

2019/06/18 Python

python的sorted用法详解

2019/06/25 Python

Django REST框架创建一个简单的Api实例讲解

2019/11/05 Python

使用pyhon绘图比较两个手机屏幕大小(实例代码)

2020/01/03 Python

Python基于gevent实现高并发代码实例

2020/05/15 Python

canvas 实现 github404动态效果的示例代码

2017/11/15 HTML / CSS

员工工作表扬信范文

2014/01/13 职场文书

小学班级口号

2014/06/09 职场文书

国庆节演讲稿范文2014

2014/09/19 职场文书

处级干部考察材料

2014/12/24 职场文书

个人党性锻炼总结

2015/03/05 职场文书

电影建国大业观后感

2015/06/01 职场文书