摘要：

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

<img src="IE.png" style="width:25px;height:25px;">

　　这样在浏览器中显示的大小就是25px。那么我们如何获取图片的真实大小呢？，下面的代码就实现了这个功能

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5.      </head>
  6.      <body>
  7.          <img src="IE.png" id="image" style="width:25px;height:25px;">
  8.          <script>
  9.              // 设置延时保证图片加载完成
  10.              setTimeout(function() {
  11.                  var
  12.                  real_width,
  13.                  real_height,
  14.                  _im         = document.getElementById('image'),
  15.                  im          = document.createElement('img');
  16.                  im.src      = _im.src,
  17.                  real_width  = im.width,
  18.                  real_height = im.height;
  19.                  alert(real_width+'\n'+real_height);
  20.              },500);
  21.          </script>
  22.      </body>
  23.  </html>

注意：上面代码本人在IE7+和chrome上都测试过了，因为没有装IE6，所以没法测试。

js获取图片原始大小的更多相关文章

  1. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  2. 【记录】JS 获取图片原始尺寸－防止图片溢出

    示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...

  3. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  4. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  6. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  7. 限制Xamarin获取图片的大小

    限制Xamarin获取图片的大小在App开发中,经常会使用网络图片.因为这样不仅可以减少App的大小,还可以动态更新图片.但是手机使用网络环境千差万别.当网络环境不是理想的情况下,加载网络图片就是一个 ...

  8. （转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  9. java获取图片原始尺寸

    java获取图片原始尺寸 URL url = null; InputStream is = null; BufferedImage img = null; try { url = new URL(pi ...

随机推荐

  1. rfid 125khz

    环境是STVD V4.1.6, 编译器是COSMIC STM8 C Compiler 16K ,Version: 4.3.1 调用的库有:GPIO,TIM2 相关宏定义: //RF数据引脚 #defi ...

  2. DLL入门

    DllTest工程 QMath.h #pragma once #ifdef API_EXPORT #define DLL_CLASS __declspec(dllexport) #define DLL ...

  3. c# dump 程序崩溃 windbg

    待研究 http://issf.blog.163.com/blog/static/194129082201002534895/ http://www.cppblog.com/woaidongmao/a ...

  4. 回顾:maven配置和常用命令整理

    推荐两个库地址,开源中国的好像不好使了 阿里的仓库:http://maven.aliyun.com/nexus/content/groups/public/ 另一个:http://repo2.mave ...

  5. git 忽略已经添加到版本库的文件

    第一步: 指令:git rm -r --cached YOUR_PATH YOUR_PATH 即 你的文件,-r 指定了递归所有的子文件夹. 第二步: 修改项目根目录下的 .gitignore 文件, ...

  6. json如何把键名作为变量?

    有时候在项目开发过程中,我们需要把json对象的键名作为一个变量.此时我们该怎么做呢? 传统的json数据格式如下: <script type="text/javascript&quo ...

  7. Android-FragmentPagerAdapter刷新无效的解决方案

    按照通常使用ListView的习惯做法,如果你只是更新保存Fragment的List数据,然后调用adapter的notifyDataSetChanged()是不会起作用的. 搜索了下发现此问题普遍存 ...

  8. android批量插入数据效率对比

    对比在android中批量插入数据的3中方式对比(各插入1W条数据所花费的时间): 1. 一个一个插入 /** * 向表中插入数据 * * @param openHelper * @param app ...

  9. 关于qt QWebKit/QWebview 使用心得

    当前项目为c/s客户端,采用qt4.8.7,需要使用仪表盘.折线图.柱状图等,曾经使用过qwt和自定义的图形控件,但是都不尽如人意.最近发现ECharts控件不错.为此就要在qt端使用web的技术.为 ...

  10. Self_Java + Selenium + Maven 环境搭建步骤

    转自:http://www.jianshu.com/p/3c05e8c9ee81 我们使用Java+Selenium WebDriver 来进行环境的搭建,同样分为两个部分: 安装Java 和 int ...