本文介绍如何在JavaScript中获取图片的原始尺寸。通过对比直接读取width属性与使用new Image()对象赋值src的方法，指出后者可绕过CSS或HTML属性限制。同时介绍HTML5提供的naturalWidth和naturalHeight属性，并给出针对IE6-8等旧浏览器的异步回调兼容方案。
JavaScript获取图片原始尺寸的方法与兼容性处理
在网页开发中，若需获取页面中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像素，但HTML中设置了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属性。由于此时需要等待图片完全加载后才能获取宽高，因此该过程是异步的。可以通过传入回调函数来处理结果，在回调中将原始宽高作为参数传入。