JS获取img图片原始尺寸高度与宽度的七种方式

JavaScript/前端
442
0
0
2023-06-18
原生Ajax之全面了解xhr的概念与使用
上一篇
uni-app弹出层uni-popup使用及修改默认样式的方法实例
下一篇
目录
  • 方式一：obj.style.width
  • 方式二：width/height
  • 方式三：offsetWidth/clientWidth
  • 方法四： getComputedStyle和 currentStyle
  • 方式五：Image对象
  • 方法六：naturalWidth
  • 方式七：兼容写法

方式一：obj.style.width

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

<img class="image"
         style="width:px; height: 200px;"
         src="https://gimg.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); //px
    console.log(image.style.height); //px
</script>

方式二：width/height

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

 <style>
     .image {
         width:px;
         height:px;   
     }
 </style>
 
<img class="image"
     src="https://gimg.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);
    // 100
</script>

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

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

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

<img class="image"
         src="https://gimg.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);
         // 1200
     })
 
     // 页面的DOM结构绘制完成了，这时候外部资源（带src属性的）还没有加载完
     window.addEventListener('DOMContentLoaded', function () {
         console.log('DOMContentLoaded');
         let image = document.querySelector('.image')
         console.log(image.width, image.height);
         // 0
     })
 
 </script>

方式三：offsetWidth/clientWidth

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

<style>
    .image {
        width:px;
        height:px;
        padding:px;
        border:px solid green;
    }
</style>
 
<img class="image"
     src="https://gimg.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);
    // 144
 
    // client = width + padding
    console.log(image.clientWidth, image.clientHeight);
    // 140
 
</script>

方法四： getComputedStyle和 currentStyle

通过 getComputedStyle和 currentStyle获取

<style>
    .image {
        width:px;
        height:px;
    }
</style>
 
<img class="image"
    src="https://gimg.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>
    function getStyle(el, name) {
        if (window.getComputedStyle) {
            // 适用于Firefox/IE/Safari/Chrome/Opera浏览器
            return window.getComputedStyle(el, null)[name];
        } else {
            // 适用于IE/7/8
            return el.currentStyle[name];
        }
    }
 
    let image = document.querySelector('.image');
 
    console.log(getStyle(image, 'width'), getStyle(image, 'height'));
    //px 100px
</script>

方式五：Image对象

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

let url =
    'https://gimg.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';
 
function getImageSize(url) {
    return new Promise(function (resolve, reject) {
        let image = new Image();
        image.onload = function () {
            resolve({
                width: image.width,
                height: image.height
            });
        };
        image.onerror = function () {
            reject(new Error('error'));
        };
        image.src = url;
    });
}
 
(async () => {
    let size = await getImageSize(url);
    console.log(size);
})();
// {width:, height: 1200}

方法六：naturalWidth

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

<style>
    .image {
        width:px;
        height:px;
    }
</style>
 
<img class="image"
     src="https://gimg.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/IE/Safari/Chrome/Opera浏览器
    let image = document.querySelector('.image');
    console.log(image.naturalWidth, image.naturalHeight);
    // 1200
    
</script>

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

方式七：兼容写法

<img class="image"
         src="https://gimg.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>
    function getImageSizeByUrl(url) {
        return new Promise(function (resolve, reject) {
            let image = new Image();
            image.onload = function () {
                resolve({
                    width: image.width,
                    height: image.height
                });
            };
            image.onerror = function () {
                reject(new Error('error'));
            };
            image.src = url;
        });
    }
 
    async function getImageSize(img) {
 
        if (img.naturalWidth) {
            // 适用于Firefox/IE/Safari/Chrome/Opera浏览器
            console.log('naturalWidth');
            return {
                width: img.naturalWidth,
                height: img.naturalHeight
            }
        } else {
            console.log('getImageSizeByUrl');
            return await getImageSizeByUrl(img.src);
        }
    }
 
    (async () => {
        let image = document.querySelector('.image');
        let size = await getImageSize(image);
        console.log(size);
    })();
    // {width:, height: 1200}
</script>

总结

方式

说明

obj.style.width

如果不设置style就获取不到width

width/height

获取渲染尺寸

offsetWidth/clientWidth

获取渲染尺寸

getComputedStyle和 currentStyle

获取渲染尺寸

Image对象

获取真实尺寸

naturalWidth

获取真实尺寸

参考

原生Ajax之全面了解xhr的概念与使用
上一篇
uni-app弹出层uni-popup使用及修改默认样式的方法实例
下一篇