欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS獲取img圖片原始尺寸高度與寬度的七種方式

 更新時(shí)間：2022年11月16日 10:39:52   作者：彭世瑜  
近期做項(xiàng)目由于每張圖片加載的時(shí)候比例大小都不一樣,加載圖片時(shí)大部分圖片會變形,導(dǎo)致圖片展示效果非常差,所以我們可以獲取圖片的原始寬高,然后以等比例展示,效果會非常好,這篇文章主要給大家介紹了關(guān)于JS獲取img圖片原始尺寸高度與寬度的七種方式,需要的朋友可以參考下

方式一：obj.style.width

通過img對象的style屬性獲取，如果沒有設(shè)置style，將返回空

<img class="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獲取，如果沒有設(shè)置屬性，會返回0

 <style>
     .image {
         width: 200px;
         height: 100px;   
     }
 </style>

<img class="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元素的尺寸

<img class="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>
     // 等外部資源都加載完了就觸發(fā)
     window.addEventListener('load', function () {
         console.log('load');
         let image = document.querySelector('.image')
         console.log(image.width, image.height);
         // 1920 1200
     })

     // 頁面的DOM結(jié)構(gòu)繪制完成了，這時(shí)候外部資源（帶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>

<img class="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>

<img class="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>
    function getStyle(el, name) {
        if (window.getComputedStyle) {
            // 適用于Firefox/IE9/Safari/Chrome/Opera瀏覽器
            return window.getComputedStyle(el, null)[name];
        } else {
            // 適用于IE6/7/8
            return 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';

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: 1920, height: 1200}

方法六：naturalWidth

通過HTML5屬性 natural（naturalWidth, naturalHeight）獲取

<style>
    .image {
        width: 200px;
        height: 100px;
    }
</style>

<img class="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>

雖然設(shè)置了圖片的顯示寬和高，但是獲取了圖片真實(shí)的尺寸

方式七：兼容寫法

<img class="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>
    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/IE9/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: 1920, height: 1200}
</script>

總結(jié)

方式說明
obj.style.width如果不設(shè)置style就獲取不到width
width/height獲取渲染尺寸
offsetWidth/clientWidth獲取渲染尺寸
getComputedStyle和 currentStyle獲取渲染尺寸
Image對象獲取真實(shí)尺寸
naturalWidth獲取真實(shí)尺寸

參考

總結(jié) 

到此這篇關(guān)于JS獲取img圖片原始尺寸高度與寬度的七種方式的文章就介紹到這了,更多相關(guān)JS獲取img圖片原始尺寸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論