获取图片的原始高度宽度和在页面上实际渲染出来的高度宽度

最新推荐文章于 2022-05-18 16:53:02 发布

a小毛同学

最新推荐文章于 2022-05-18 16:53:02 发布

阅读量1.5k

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/mao871863224/article/details/110056540

版权

本文介绍了如何在JavaScript中获取图片的原始高度和宽度，以及在页面中实际渲染的高度和宽度。通过创建新的Image对象并监听onload事件，可以在图片完全加载后获取其naturalWidth和naturalHeight属性来得到原始尺寸。同时，使用DOM元素的width和height、offsetWidth和offsetHeight属性可以获取图片在页面上的实际渲染尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取原始高度和宽度，也就是图片本身的高度和宽度

<img id="id1" src="图片路径" alt="">

//首先获取dom元素
let dom = document.getElementById('id1')
//如果图片是动态返回的，那么直接按照下面的方式写，可能获取不到值，一直显示为0
//这是因为这时候返回的图片还没加载完成就去获取，当然是0了
let img_url = url  //获取到动态返回的图片的链接
let width = img_url .naturalWidth
let height = img_url .naturalHeight
//此时我们需要做的就是等图片完全加载完成之后去获取它原始的高度和宽度
const Img = new Image()
Img.src = img_url
//onload就是在图片加载完成后执行的函数
//此时就可以很完美的获取到图片的原始高度和宽度
Img.onload = () => {
	let width = Img.naturalWidth
	let height = Img.naturalHeight
}

2、获取渲染在页面的实际高度和宽度
很多图片在渲染的时候回指定宽度和高度，或者限制最大高度和宽度，这时候需要去获取他们在页面中实际渲染的大小，以便在图片的上方图层做一些操作

//首先，我们依然需要去获取dom元素
let dom = document.getElementById('id1')

//以下这两种方法都可以获取到

let width = dom.width  
let height = dom.height

let width1 = dom.offsetWidth
let height1 = dom.offsetHeight