CodePlayer

在JS中，想要获取一个图片的真实宽高不能直接通过image.width和image.height属性，因为这两个属性获取到的可能是<img>标签的attribute。

<!-- image.width 和 image.height 获取到的可能是标签的attribute -->
<img width="100" height="100" src="path" />

使用HTML5新增的属性naturalWidth和naturalHeight

好消息是，在HTML5中Image对象新增了naturalWidth和naturalHeight属性，可以直接获取图片的真实宽高。

function getImageRealSize(img){
	return { width: img.naturalWidth, height: img.naturalHeight };
}

不过这种方式只能在支持HTML5的浏览器中使用。尤其是对于IE来说，就必须是 IE9+。

兼容所有浏览器的解决方案

如果你想兼容IE8及以下版本，你可以使用如下代码。

/**
 * 获取图片的真实宽高
 * @param {Image} img 
 * @param {function} callback 为了兼容旧浏览器，只能采用回调的方式得到真实的 width 和 height
 */
function getImageRealSize(img, callback) {
	if (img.naturalWidth) { // 如果支持HTML5属性，直接使用
		callback(img.naturalWidth, img.naturalHeight);
	} else {
		// 新建一个图片副本，来获取原始宽高
		var copy = new Image();
		copy.onload = function () {
			callback(copy.width, copy.height);
		};
		copy.src = img.src;
	}
}