js获取img宽高

痛定思痛。 2022-07-12 05:09 199阅读 0赞

## 知识点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代码：

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代码：

这样也可以生成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_www.cnblogs.com_koukouyifan_p_4066564.html]  
[http://blog.csdn.net/jimmyhandy/article/details/48654223][http_blog.csdn.net_jimmyhandy_article_details_48654223]  
[http://blog.csdn.net/isaisai/article/details/52467738][http_blog.csdn.net_isaisai_article_details_52467738]  
[http://www.tuicool.com/articles/RRbmMr][http_www.tuicool.com_articles_RRbmMr]

## 福利 ##

下载地址：[网盘链接][Link 1]

[http_www.cnblogs.com_koukouyifan_p_4066564.html]: http://www.cnblogs.com/koukouyifan/p/4066564.html
[http_blog.csdn.net_jimmyhandy_article_details_48654223]: http://blog.csdn.net/jimmyhandy/article/details/48654223
[http_blog.csdn.net_isaisai_article_details_52467738]: http://blog.csdn.net/isaisai/article/details/52467738
[http_www.tuicool.com_articles_RRbmMr]: http://www.tuicool.com/articles/RRbmMr
[Link 1]: http://edu.duolaimier.cn/forum.php