JS获取img图片的原始尺寸高度和宽度

目录

方式一：obj.style.width

通过img对象的style属性获取，如果没有设置style，将返回空

<imgclass="image"style="width: 100px;height: 200px;"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"><script>let image = document.querySelector('.image');
    console.log(image.style.width);// 100px
    console.log(image.style.height);// 200px</script>

方式二：width/height

直接通过img的属性值width/height获取，如果没有设置属性，会返回0

<style>.image{width: 200px;height: 100px;}</style><imgclass="image"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"alt=""><script>let image = document.querySelector('.image');
    console.log(image.width, image.height);// 200 100</script>

如果DOM图片完全加载后，就可以在控制台获取图片元素的尺寸了

document.querySelector('.image').height
// 1200

等待dom完全加载完成就可以获取img元素的尺寸

<imgclass="image"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"alt=""><script>// 等外部资源都加载完了就触发
     window.addEventListener('load',function(){
         console.log('load');let image = document.querySelector('.image')
         console.log(image.width, image.height);// 1920 1200})// 页面的DOM结构绘制完成了，这时候外部资源（带src属性的）还没有加载完
     window.addEventListener('DOMContentLoaded',function(){
         console.log('DOMContentLoaded');let image = document.querySelector('.image')
         console.log(image.width, image.height);// 0 0})</script>

方式三：offsetWidth/clientWidth

通过offset(offsetWidth/offsetHeight) 和 client(clientWidth/clientHeight)获取

<style>.image{width: 200px;height: 100px;padding: 20px;border: 2px solid green;}</style><imgclass="image"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"alt=""><script>let image = document.querySelector('.image');// offset = width + padding  + border
    console.log(image.offsetWidth, image.offsetHeight);// 244 144// client = width + padding
    console.log(image.clientWidth, image.clientHeight);// 240 140</script>

方法四： getComputedStyle和 currentStyle

通过 getComputedStyle和 currentStyle获取

<style>.image{width: 200px;height: 100px;}</style><imgclass="image"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"alt=""><script>functiongetStyle(el, name){if(window.getComputedStyle){// 适用于Firefox/IE9/Safari/Chrome/Opera浏览器return window.getComputedStyle(el,null)[name];}else{// 适用于IE6/7/8return el.currentStyle[name];}}let image = document.querySelector('.image');

    console.log(getStyle(image,'width'),getStyle(image,'height'));// 200px 100px</script>

方式五：Image对象

通过Image对象，异步获取图片尺寸

let url ='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd';functiongetImageSize(url){returnnewPromise(function(resolve, reject){let image =newImage();
        image.onload=function(){resolve({width: image.width,height: image.height
            });};
        image.onerror=function(){reject(newError('error'));};
        image.src = url;});}(async()=>{let size =awaitgetImageSize(url);
    console.log(size);})();// {width: 1920, height: 1200}

方法六：naturalWidth

通过HTML5属性 natural（naturalWidth, naturalHeight）获取

<style>.image{width: 200px;height: 100px;}</style><imgclass="image"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"alt=""><script>// 适用于Firefox/IE9/Safari/Chrome/Opera浏览器let image = document.querySelector('.image');
    console.log(image.naturalWidth, image.naturalHeight);// 1920 1200</script>

虽然设置了图片的显示宽和高，但是获取了图片真实的尺寸

方式七：兼容写法

<imgclass="image"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2Fntplrtyw2bvntplrtyw2bv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"alt=""><script>functiongetImageSizeByUrl(url){returnnewPromise(function(resolve, reject){let image =newImage();
            image.onload=function(){resolve({width: image.width,height: image.height
                });};
            image.onerror=function(){reject(newError('error'));};
            image.src = url;});}asyncfunctiongetImageSize(img){if(img.naturalWidth){// 适用于Firefox/IE9/Safari/Chrome/Opera浏览器
            console.log('naturalWidth');return{width: img.naturalWidth,height: img.naturalHeight
            }}else{
            console.log('getImageSizeByUrl');returnawaitgetImageSizeByUrl(img.src);}}(async()=>{let image = document.querySelector('.image');let size =awaitgetImageSize(image);
        console.log(size);})();// {width: 1920, height: 1200}</script>

总结

方式说明obj.style.width如果不设置style就获取不到widthwidth/height获取渲染尺寸offsetWidth/clientWidth获取渲染尺寸getComputedStyle和 currentStyle获取渲染尺寸Image对象获取真实尺寸naturalWidth获取真实尺寸

参考

1. JS获取IMG图片高宽
2. （js有关图片加载问题）dom加载完和onload事件