JS獲取img圖片原始尺寸高度與寬度的七種方式
更新時間：2022年11月16日 10:39:52 作者：彭世瑜
近期做項目由于每張圖片加載的時候比例大小都不一樣,加載圖片時大部分圖片會變形,導致圖片展示效果非常差,所以我們可以獲取圖片的原始寬高,然后以等比例展示,效果會非常好,這篇文章主要給大家介紹了關(guān)于JS獲取img圖片原始尺寸高度與寬度的七種方式,需要的朋友可以參考下
方式一：obj.style.width
通過img對象的style屬性獲取，如果沒有設置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獲取，如果沒有設置屬性，會返回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)繪制完成了，這時候外部資源（帶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>
雖然設置了圖片的顯示寬和高，但是獲取了圖片真實的尺寸
方式七：兼容寫法
<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 | 如果不設置style就獲取不到width |
| width/height | 獲取渲染尺寸 |
| offsetWidth/clientWidth | 獲取渲染尺寸 |
| getComputedStyle和 currentStyle | 獲取渲染尺寸 |
| Image對象 | 獲取真實尺寸 |
| naturalWidth | 獲取真實尺寸 |
參考
總結(jié)
到此這篇關(guān)于JS獲取img圖片原始尺寸高度與寬度的七種方式的文章就介紹到這了,更多相關(guān)JS獲取img圖片原始尺寸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了js移動端圖片壓縮上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法
這篇文章主要介紹了ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法,需要的朋友可以參考下2014-06-06
本篇文章給大家詳細分析了javascript數(shù)組拍平的方法，對此有興趣的朋友跟著小編一起學習下吧。2018-01-01
關(guān)于arguments,callee,caller等的測試
關(guān)于arguments,callee,caller等的測試...2006-12-12
前端與后端數(shù)據(jù)交互是軟件開發(fā)中不可或缺的一環(huán),下面這篇文章主要給大家介紹了關(guān)于前端給后端傳數(shù)據(jù)的五種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了淺談一種讓小程序支持JSX語法的新思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
關(guān)于layui 實現(xiàn)點擊按鈕添加一行(方法渲染創(chuàng)建的table)
今天小編就為大家分享一篇關(guān)于layui 實現(xiàn)點擊按鈕添加一行(方法渲染創(chuàng)建的table)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
第一種就是利用ajax方式，第二種是，動態(tài)創(chuàng)建一個script標簽，設置其src屬性，通過把script標簽插入到頁面head來加載js，感興趣的朋友可以了解下2013-08-08
js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
本篇文章主要是對js中的類型轉(zhuǎn)換與引用類型(Boolean_Number_String)進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了JS實現(xiàn)超精簡響應鼠標顯示二級菜單代碼,可實現(xiàn)針對鼠標事件的響應動態(tài)修改頁面元素屬性的功能,非常簡單實用,需要的朋友可以參考下2015-09-09