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

基于jquery.Jcrop的头像编辑器

Mar 01 Javascript

jQuery EasyUI中对表格进行编辑的实现代码

Jun 10 Javascript

Javascript自定义函数判断网站访问类型是PC还是移动终端

Jan 10 Javascript

简介JavaScript中用于处理正切的Math.tan()方法

Jun 15 Javascript

Javascript连接Access数据库完整实例

Aug 03 Javascript

JavaScript验证Email(3种方法)

Sep 21 Javascript

基于react框架使用的一些细节要点的思考

May 31 Javascript

在React中如何优雅的处理事件响应详解

Jul 24 Javascript

js正则表达式校验指定字符串的方法

Jul 23 Javascript

基于vue v-for 多层循环嵌套获取行数的方法

Sep 26 Javascript

关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

Dec 09 Javascript

vue中数字相加为字串转化为数值的例子

Nov 07 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

URL Rewrite的设置方法

2007/01/02 PHP

浅析ThinkPHP中的pathinfo模式和URL重写

2014/01/06 PHP

PHP中执行cmd命令的方法

2014/10/11 PHP

phpmyadmin提示The mbstring extension is missing的解决方法

2014/12/17 PHP

php用xpath解析html的代码实例讲解

2019/02/14 PHP

PHP safe_mode开启对于PHP系统函数有什么影响

2020/11/10 PHP

js FLASH幻灯片字符串中有连接符＆的处理方法

2012/03/01 Javascript

javascript中创建对象的几种方法总结

2013/11/01 Javascript

纯js分页代码(简洁实用)

2013/11/05 Javascript

JS简单实现文件上传实例代码（无需插件）

2013/11/15 Javascript

jquery easyui combox一些实用的小方法

2013/12/25 Javascript

JS实现5秒钟自动封锁div层的方法

2015/02/20 Javascript

jQuery Ajax使用实例

2015/04/16 Javascript

AngularJS自动表单验证

2016/02/01 Javascript

jQuery使用$.each遍历json数组的简单实现方法

2016/04/18 Javascript

javascript基础语法——全面理解变量和标识符

2016/06/02 Javascript

微信小程序框架详解及实例应用

2016/09/26 Javascript

AngularJS之页面跳转Route实例代码

2017/03/10 Javascript

微信公众号平台接口开发获取access_token过程解析

2019/08/14 Javascript

kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.

2019/09/17 Javascript

[01:20]DOTA2更新全新英雄天涯墨客现已加入游戏

2018/08/25 DOTA

采用Psyco实现python执行速度提高到与编译语言一样的水平

2014/10/11 Python

用Python的SimPy库简化复杂的编程模型的介绍

2015/04/13 Python

谈谈Python进行验证码识别的一些想法

2016/01/25 Python

Numpy数组的保存与读取方法

2018/04/04 Python

Python实现的远程文件自动打包并下载功能示例

2019/07/12 Python

django rest framework serializer返回时间自动格式化方法

2020/03/31 Python

Python venv虚拟环境配置过程解析

2020/07/08 Python

加州风格的游泳和沙滩装品牌：Cupshe

2019/06/10 全球购物

shell程序如何生命变量？shell变量是弱变量吗？

2014/11/10 面试题

机电专业毕业生求职信

2013/10/27 职场文书

学校岗位设置方案

2014/01/16 职场文书

2014年会策划方案

2014/05/11 职场文书

店面出租协议书范本

2014/11/28 职场文书

公司2014年度工作总结

2014/12/10 职场文书

2016年三八节红领巾广播稿

2015/12/17 职场文书