js获取img宽高

知识点1

如果写了var img = new Image（100 ，100）， img.src = ‘1.png’ ，这样的作用是可以把img缓存到浏览器中，常用来做图片预加载。

知识点2

html代码：

[外链图片转存失败(img-dfDsOQbF-1562240215537)(https://mp.csdn.net/mdeditor/1.png)]

js代码：

var imgW = document.getElementsByTagName('img')[0].style.width;

上面这种获取图片宽高方法，必须有style=“width:400px”，才能获取图片宽高。

知识点3

html代码：

<style>
img{ padding:20px;border:1px solid red;}
</style>
[外链图片转存失败(img-1OTZrTAM-1562240215538)(https://mp.csdn.net/mdeditor/1.png)]

js代码：

window.onload = function(){
	var img = document.getElementsByTagName('img')[0], 
	imgOffsetWidth = img.offsetWidth,  //442px
	imgClientWidth = img.clientWidth;  //440px;
}

其实offsetWidth得到的是width值+padding值+border值，clientWidth得到的是width值+padding值。但是值得注意的是，如果把style="width:400px"去掉，那么它们获取的就是真实图片的宽高。

知识点4

html代码：

[外链图片转存失败(img-NkUAK1sD-1562240215538)(https://mp.csdn.net/mdeditor/1.png)]

js代码：

//naturalWidth只是用于Firefox/IE9/Safari/Chrome/Opera浏览器
window.onload = function(){
	var img = document.getElementsByTagName('img')[0];
	nWidth = img.naturalWidth     //图片真实宽度
	nHeight = img.naturalHeight   //图片真实高度
}

naturalWidth和naturaHeight都是获取图片真实宽高的值，但是只适用于的IE9以上浏览器，所以对于IE9以下得用其他方法。

知识点5

html代码：

[外链图片转存失败(img-YKj95iEa-1562240215539)(https://mp.csdn.net/mdeditor/1.png)]

js代码：

window.onload = function(){
	var img = document.getElementById('ii')
	alert(img.width)  //400
}

以上这种方式可以获取给img标签设置的 width=400的值，但是如果没有在标签中设置 width=400，那么img.width获取的就是图片真实的宽高。

知识点6

html代码：

无img标签

js代码：

<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script type="text/javascript">
	var img = new Image();
	img.src = "1.jpg";
	$(img).appendTo("body")
</script>

这样也可以生成image标签。

知识点7

html 代码：

[外链图片转存失败(img-uLxunGkc-1562240215539)(https://mp.csdn.net/mdeditor/1.png)]

js代码：

// 传入img对象，通过回调函数获取image宽高
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]
}

var img = document.getElementByID('ii');
getImgNaturalDimensions(img , function( arr ){
	alert(arr[0])  //图片宽度
	alert(arr[1])  //图片高度
})


//如果只有图片的路径，则用法为：
function getImgNaturalDimensions(src, callback) {
    var nWidth, nHeight
   
    var imgae = new Image()
    image.src = src;
    image.onload = function() {
        callback(image.width, image.height);
    }
    return [nWidth, nHeight];
}

getImgNaturalDimensions('1.png' , function( arr ){
	alert(arr[0])  //图片宽度
	alert(arr[1])  //图片高度
})

上面是获取图片大小的封装方法，注意以上获取图片大小的任何方法都必须有个前提，就是必须保证图片已经加载完毕，否则获取都是0，0。

探究问题

以上几种获取图片大小的方式，如果给img标签加上了padding、border等样式，看看获取的结果如何？

参考链接：

http://www.cnblogs.com/koukouyifan/p/4066564.html
http://blog.csdn.net/jimmyhandy/article/details/48654223
http://blog.csdn.net/isaisai/article/details/52467738
http://www.tuicool.com/articles/RRbmMr

福利

下载地址：网盘链接