最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小,很繁琐

获取图片大小:

1.使用innerWidth,innerHeight

使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS像素中渲染的宽度

也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的

2.使用document.createElement(“img”)
1
2
3
var img = document.createElement("img")
img.src = "1.jpg"
var width = img.width

动态创建一个imgElement,通过给src赋值,最终来获取img的宽和高

需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件

1
2
3
4
5
var img = document.createElement("img")
img.onload = function () {
var width = img.width
}
img.src = "1.jpg"

3.使用naturalWidth(推荐)

使用HTMLImageElement.naturalWidth拿到图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0

这样就可以拿到图片的原始大小

各游览器兼容情况:
游览器兼容情况

ps:各位国庆节快乐!

以上