首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS获取图片原始宽高

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...img的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement..."1.jpg" 3.使用naturalWidth(推荐) 使用HTMLImageElement.naturalWidth拿到图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0 这样就可以拿到图片的原始大小

6.2K20

javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高 简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...通过onload就能获取图片的宽高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。...从缓存里读取图片的宽高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。...通过定时循环检测获取 这个方法可以很快获取图片相关信息: // 记录当前时间戳 var start_time = new Date().getTime() // 图片地址 后面加时间戳是为了避免缓存 var...这是一张2560 * 1600大小图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片宽高非常实用。

5.1K10
领券