js获取网页中图片的原始尺寸宽高

比如有这样的一段html代码：

<img src="2.jpg" title="1520265830019045573.jpg" id="img1" alt="javaSE.jpg">

当这个img标签没有被任何的css代码所作用时，我们使用jquery的width()方法或者js的innerWidth属性，获取到的值就是2.jpg的真实的宽。

$("#img1").width();//945px

但是当我在网页中增加了css代码：

#img1{
    max-width:800px;
}

此时我们再使用上边的方法获取到的宽就是800px了。

如果现在有这样一个需求：点击网页上的图片，弹出一个遮罩层，在遮罩层里面按图片的原始尺寸来显示图片以便让读者可以清晰的看清楚每一张图片。这个问题的关键在于如何获取网页上图片的真实宽高了。

那么为什么使用jquery的width()函数或者js的innerWidth属性就不能获取图片的真实尺寸呢？

这是因为不管是width()还是innerWidth属性获取的都是元素盒模型的实际渲染的宽度，而不是图片的原始宽度。要想获取到图片的原始宽度可以使用h5提供的naturalWidth和naturalHeight属性，又因为IE8及以前版本的浏览器并不支持naturalWidth和naturalHeight属性，为了兼容ie老版本浏览器，我们可以在ie8及以下的时候使用new Image()来完成兼容，完整的获取网页图片真实尺寸的代码如下：

	function getRealImgSize(img){
	 		var obj={};
	 		if (typeof img.naturalWidth == "undefined"
 				|| typeof img.naturalHeight == "undefined") {// IE 6/7/8
 			　　var i = new Image();
 			　　i.src = myimage.src;
 				obj["width"]=i.width;
 				obj["height"]=i.height;
 			}else {// 支持HTML5的浏览器
				obj["width"]=img.naturalWidth;
 				obj["height"]=img.naturalHeight;
 			}
	 		return obj;
	 	}
	var obj=getRealImgSize(document.getElementById("img1")); 	
	console.log(obj);

执行结果：{width:945,height:680}