上周我写了一篇快速获取图片大小的文章，参见《JavaScript快速获取图片宽高的方法》，在那篇文章里所获取的图片大小都是原始尺寸。既然这样，我今天为何还要再写一篇文章介绍如何获取页面上图片原始大小的方法呢？只是有些博友发邮件问我这个问题了，我感觉还是有必要写写。
通过去除样式获取原始大小
在JavaScript中获取页面中图片的大小都是最终样式呈现的大小，比如一张1000px宽的图片你给它设置宽为300px那么JavaScript获取到图片的宽度就是300px。
假如页面有这样一个图片
<img src="http://img.hb.aicdn.com/5682a4bf26a0455a2e3e6b52ae0716b8654bf6811b033-rL3rJM_fw580" width=200 height=300 />
Code
document.images[0].onload = function () {
console.log('解除样式前: width:' + this.width + ', height:' + this.height);
// 解除样式
this.style.width = 'auto';
this.style.height = 'auto';
// 获取原始大小
console.log('解除样式后: width:' + this.width + ', height:' + this.height);
};
Output:
解除样式前: width:200, height:300
解除样式后: width:580, height:863
通过解除样式，我们获取到图片的原始尺寸
如果页面在给img指定样式的时候加了important，结果还是以important为主，页面代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS获取图片原始大小</title>
<style type="text/css">
img { width:300px !important; height:200px !important; }
</style>
</head>
<body>
<img src="http://img.hb.aicdn.com/5682a4bf26a0455a2e3e6b52ae0716b8654bf6811b033-rL3rJM_fw580" />
</body>
</html>
通过style标签控制图片大小，并且加了important，执行结果
解除样式前: width:300, height:200
解除样式后: width:300, height:200
通过执行结果与FireBug解析结果来看，虽然我们给图片宽高定义了auto，但style标签的!important权重覆盖了auto值，所以结果自然都是一样的。
我们可以通过setAttribute函数设置样式权重解决这个问题
Code
document.images[0].onload = function () {
console.log('解除样式前: width:' + this.width + ', height:' + this.height);
// 解除样式
this.setAttribute('style', 'width:auto !important;height:auto !important;')
// 获取原始大小
console.log('解除样式后: width:' + this.width + ', height:' + this.height);
};
Output:
解除样式前: width:200, height:300
解除样式后: width:580, height:863
这样就解决样式被important的问题，但我们不能为了取图片的原始宽高而改变图片样式的大小，所以我们可以记录一下它的初始宽高，取值后还原！
document.images[0].onload = function(){
var str = '';
// 记录原始样式的值
var default_set = {};
default_set.width = this.width;
default_set.height = this.height;
default_set.style = this.getAttribute('style');
console.log('解除样式前: width:' + this.width + ', height:' + this.height);
// 解除样式
this.setAttribute('style', default_set.style + ';width:auto !important;height:auto !important;');
// 获取原始大小
var original_size = {};
original_size.width = this.width;
original_size.height = this.height;
// 还原默认样式尺寸
this.setAttribute('style', default_set.style);
// 获取原始大小
console.log('解除样式后: width:' + original_size.width + ', height:' + original_size.height);
};
这样就既能取值又不会改变原始样式
通过Image()对象获取原始宽高
这种方式就没有那么麻烦，直接new一个Image()对象，然后把img的src赋值给他即可获取。
var img = new Image();
img.src = document.images[0].src;
if (img.complete) {
getImgOriginalSize.call(img);
img = null;
} else {
img.onload = function () {
getImgOriginalSize.call(img);
img = null;
};
}
function getImgOriginalSize () {
console.log('width:' + this.width + ',height' + this.height);
}
Output:
width:580,height:863
并且不要担心new Image对象会多一个http请求，浏览器加载图片后已经有缓存，你new N个image对象都没问题，当然，内存会消耗，所以用完后img置为null。
通过new Image方式获取原始图片大小也可以结合我之前写的快速获取图片大小的方法使用。
