用JavaScript获取图片真实尺寸大小的简单方法
随着智能手机等小屏移动设备的兴起,以前只针对桌面电脑的网站必不可少的向自适应网站页面模式迁移,而在这其中,max-width
这个新的CSS属性在自适应设计中占有举足轻重的作用。我通常都是将img
, iframe
, 和 embed
等标签设置成 max-width: 100%
,这样,它们的尺寸就会跟随它们的父元素一样扩展和收缩,就能自适应各种平面尺寸/分辨率的移动设备了。
但最近我发现了一个问题,就是当采取自适应技术后,图片在页面上表现的尺寸大小往往不是它们的真实大小,那么,如果我想获取页面上一个图片的真实长度宽度,该怎么办呢?最近偶然在MDN上发现了一个从未听说的新属性,正好能帮我解决这个问题!
JavaScript代码
使用JavaScript,我们能获取一个图片的真实宽度和高度:
myImage.addEventListener('onload', function() { console.log('我的宽度是: ', this.naturalWidth); console.log('我的高度是: ', this.naturalHeight); });
我还是第一次看见naturalWidth
和 naturalHeight
这两个只读属性,真是两个非常有用的属性。不论你如何用CSS来变换一个img
元素的高度和宽度,图片的原始大小都能用它们获取到。需要提醒的一点是,你不需要等待图片成功加载到页面后,才能正确的访问这两个属性,所以我它们放到了onload
事件里。
阅读余下内容
“不需要等待图片成功加载到页面后”应该改为”必须要等待图片成功加载到页面后”