JS获取图片原始宽高

零式的天空

发布于 2022-03-26 15:31:10

6.1K0

发布于 2022-03-26 15:31:10

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

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

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

var img = document.createElement("img")
img.src = "1.jpg"
var width = img.width

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

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

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

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

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

ps:各位国庆节快乐！

以上

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-09-30，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度