编程 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修改浏览器URL地址栏的实现代码

Oct 21 Javascript

jquery实现鼠标拖动图片效果示例代码

Jan 09 Javascript

jQuery 1.9.1源码分析系列（十五)之动画处理

Dec 03 Javascript

js数字舍入误差以及解决方法(必看篇)

Feb 28 Javascript

EasyUI的DataGrid每行数据添加操作按钮的实现代码

Aug 22 Javascript

js实现随机点名系统(实例讲解)

Oct 18 Javascript

Vue-cli Eslint在vscode里代码自动格式化的方法

Feb 23 Javascript

jQuery实现图片随机切换、抽奖功能(实例代码)

Oct 23 jQuery

Angular 多级路由实现登录页面跳转(小白教程)

Nov 19 Javascript

TypeScript之调用栈的实现

Dec 31 Javascript

js抽奖转盘实现方法分析

May 16 Javascript

多页vue应用的单页面打包方法(内含打包模式的应用)

Jun 11 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基础知识:类与对象(4) 范围解析操作符(::)

2006/12/13 PHP

PHP 开发环境配置（Zend Server安装）

2010/04/28 PHP

常见php数据文件缓存类汇总

2014/12/05 PHP

PHP的mysqli_stat()函数讲解

2019/01/23 PHP

PHP字符串与数组处理函数用法小结

2020/01/07 PHP

JavaScript 组件之旅（四）：测试 JavaScript 组件

2009/10/28 Javascript

JQuery通过Ajax提交表单并返回结果

2011/07/31 Javascript

JavaScript获取onclick、onchange等事件值的代码

2013/07/22 Javascript

[原创]推荐10款最热门jQuery UI框架

2014/08/19 Javascript

使用canvas实现仿新浪微博头像截取上传功能

2015/09/02 Javascript

JavaScript中获取HTML元素值的三种方法

2016/06/20 Javascript

AngularJS ng-bind-template 指令详解

2016/07/30 Javascript

解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题

2018/09/14 Javascript

Javascript数组方法reduce的妙用之处分享

2019/06/10 Javascript

js实现指定时间倒计时效果

2019/08/26 Javascript

JavaScript实现Excel表格效果

2020/02/07 Javascript

javascript实现拼图游戏

2021/01/29 Javascript

[02:26]2016国际邀请赛8月3日开战中国军团出征西雅图

2016/08/02 DOTA

通过C++学习Python

2015/01/20 Python

使用py2exe在Windows下将Python程序转为exe文件

2016/03/04 Python

利用python爬取软考试题之ip自动代理

2017/03/28 Python

Python爬虫工程师面试问题总结

2018/03/22 Python

Python Scapy随心所欲研究TCP协议栈

2018/11/20 Python

python实现将一维列表转换为多维列表(numpy+reshape)

2019/11/29 Python

Python多线程实现支付模拟请求过程解析

2020/04/21 Python

Tensorflow使用Anaconda、pycharm安装记录

2020/07/29 Python

python打包生成so文件的实现

2020/10/30 Python

html5教程实现Photoshop渐变色效果

2013/12/04 HTML / CSS

Ray-Ban雷朋美国官网：全球领先的太阳眼镜品牌

2016/07/20 全球购物

手机银行营销方案

2014/03/14 职场文书

爱祖国演讲稿

2014/05/04 职场文书

社区爱国卫生月活动总结

2014/06/30 职场文书

长江三峡导游词

2015/01/31 职场文书

2015年社区中秋节活动总结

2015/03/23 职场文书

催款函怎么写

2015/06/24 职场文书

大学升旗仪式主持词

2015/07/04 职场文书