页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下

<img src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg">
<script>
var img = document.getElementsByTagName('img')[0]
var width = getWH(img, 'width') // 690
</script>

这里使用的getWH方法是之前文章里提到的。这时候获取的宽度和图片的原始尺寸是一样的。

如果给img加上了width属性,这种方式就不行了,比如图片实际宽度是690,设置了width为400,这时按上面的方式获取则返回400

<img width="400" src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg">
<script>
var img = document.getElementsByTagName('img')[0]
var width = getWH(img, 'width') // 400
</script>

很明显,400不是图片的原始宽度。

有一种方式可以获取到,直接创建一个新img对象,然后把旧img的src赋值给新的,这时候获取新img的宽度即可

<img width="400" src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg">
<script>
function getNaturalWidth(img) {
var image = new Image()
image.src = img.src
var naturalWidth = image.width
return naturalWidth
}
var img = document.getElementsByTagName('img')[0]
getNaturalWidth(img) // 690
</script>

需要注意的是,这里新创建的image是不需要添加的DOM文档里的。

HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。改造下获取图片尺寸的方法。

function getImgNaturalDimensions(img, callback) {
var nWidth, nHeight
if (img.naturalWidth) { // 现代浏览器
nWidth = img.naturalWidth
nHeight = img.naturalHeight
} else { // IE6/7/8
var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}

注意IE6/7/8的处理,创建了一个新的img,仅设置其src,这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的,可以传一个回调,回调里把原始的宽高作为参数传入。

相关:

http://www.cnblogs.com/snandy/p/3704938.html

http://www.sitepoint.com/html5-responsive-design-image-dimensions/

http://www.w3.org/TR/2011/WD-html5-author-20110705/the-img-element.html#the-img-element

JavaScript获取图片的原始尺寸的更多相关文章

  1. js获取图片信息(一)-----获取图片的原始尺寸

    如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...

  2. 如何用JavaScript在浏览器端获取图片的原始尺寸大小?

    var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...

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

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

  4. jq获取图片的原始尺寸,自适应布局

    原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...

  5. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

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

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

  7. javascript 获取图片原始尺寸

    javascript 获取图片原始尺寸 function getImgInfo(url){ var img = new Image(), loaded = false; var info = {}; ...

  8. 使用Python获取图片的物理尺寸(KB)

    如何获取图片的物理尺寸,而非(width, height)? #! -*- coding: utf-8 -*- import requests import io url = "https: ...

  9. [转]js动态获取图片长宽尺寸

    http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...

随机推荐

  1. Java-ios推送

    之前做的消息推送,向Android和ios客户端推送.这里只说ios的推送,ios的推送最后都会推送到苹果的APNS服务器上,再有APNS服务器推送到ios设备上.因为考虑到这一点,第一版的消息推送苹 ...

  2. 《利用Python进行数据分析》第4章学习笔记

    NumPy基础:数组和矢量计算 NumPy的ndarray:一种多维数组对象 该对象是一个快速灵活的大数据集容器.你可以利用这种数组对整块数据执行一些数学运算,其语法跟标量元素之间的运算一样 列表转换 ...

  3. halcon读取一张照片,并转化为灰度图像

    dev_close_window () read_image (Image, 'E:/图片/123.jpg') get_image_size (Image, Width, Height) dev_op ...

  4. Dom4j 对XMl解析 新手学习,欢迎高手指正

    废话不多,先看代码 public static void main(String args[]){ ReaderXml("d:/example.xml");//读取XML,传入XM ...

  5. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  6. 工作当中实际运用(1)——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

  7. 快速学习C语言三: 开发环境, VIM配置, TCP基础,Linux开发基础,Socket开发基础

    上次学了一些C开发相关的工具,这次再配置一下VIM,让开发过程更爽一些. 另外再学一些linux下网络开发的基础,好多人学C也是为了做网络开发. 开发环境 首先得有个Linux环境,有时候家里机器是W ...

  8. Android性能优化典范第一季

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...

  9. Entity FrameWork 中使用Lambda访问数据库性能优化

    在使用Entity Framework 访问数据库时,我们经常使用Lambda表达式,但是如果不小心的话,很容易就掉到坑里了.比如下面的例子:用Lambda访问MSSqlServer中的NewsInf ...

  10. activeMq笔记

    安装 下载地址:http://activemq.apache.org/download.html 安装教程: http://gerrard-ok.iteye.com/blog/1766203 解压缩: ...