知识点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
福利
下载地址:网盘链接