JavaScript 获取图像真正的宽度和高度 - 文章教程

JavaScript 获取图像真正的宽度和高度

发布于 2018-09-16 字数 1942 浏览 1448 评论 0

CSS 帮助设计师设置一个元素的最大宽度 max-width 和最大高度 max-height ,防止布局错位,我总是把 imgiframeembed 标签设置成 max-width: 100% 这样在小屏幕的设备上依然可以浏览,不过我还是希望能够获取到图像没有被拉伸和缩小的原始尺寸。

thumb.addEventListener('onload', function() {
    console.log('My width is: ', this.naturalWidth);
    console.log('My height is: ', this.naturalHeight);
});

上面的代码中使用了 naturalWidthnaturalHeight,这是 HTML5 新增的属性,它们可以直接获取图片的原始宽高。而且这在 Fixefox/Chrome/Safari/Opera/IE9 里已经实现。

JavaScript 获取图像真正的宽度和高度

页面中的 IMG 元素想要获取图片的原始尺寸通常使用 innerWidth 属性或者使用 jQuery 的 width() 方法,但是如果给图片添加了 Width 样式,那么用 innerWidthwidth() 获得宽度就不是你想要的,因为 innerWidthwidth() 获取的是元素盒模型的实际渲染的宽度,而不是图片的原始宽度。

可以使用 naturalWidth 和 naturalHeight 去获取图片的原始尺寸,考虑的兼容问题,可以采用 new Image() 去获得图片的原始尺寸:

function  getNaturalSize(img){
  var naturalSize ={};
  if(window.naturalWidth && window.naturalHeight){
    naturalSize.width = img.width;
    naturalSize.height = img.height;
  }else{
    var image = new Image();
    image.src = img.src;
    naturalSize.width = image.width;
    naturalSize.height = image.height;
  }
  return naturalSize;
}

使用该方法可以获取图片的原始尺寸,通常在图片放大缩小,动态生成图片处需要用到该属性比较好。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论