Javascript获取图片原始宽度和高度的方法详解


Posted in Javascript onSeptember 20, 2016

前言

网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助。

方法详解

页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法。

如下:

<img id="img" src="1.jpg">

<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 600
</script>

这样貌似可以拿到图片的尺寸。

但是如果给img元素增加了width属性,比如图片实际宽度是600,设置了width为400。这时候innerWidth为400,而不是600。显然,用innerWidth获取图片原始尺寸是不靠谱的。

这是因为 innerWidth属性获取的是元素盒模型的实际渲染的宽度,而不是图片的原始宽度。

<img id="img" src="1.jpg" width="400">

<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 400
</script>

jQuery的width()方法在底层调用的是innerWidth属性,所以width()方法获取的宽度也不是图片的原始宽度。

那么该怎么获取img元素的原始宽度呢?

naturalWidth / naturalHeight

HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。

如下:

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

naturalWidth / naturalHeight在各大浏览器中的兼容性如下:

Javascript获取图片原始宽度和高度的方法详解

图片截取自http://caniuse.com/#search=naturalWidth

所以,如果不考虑兼容至IE8的,可以放心使用naturalWidth / naturalHeight属性了。

IE7/8中的兼容性实现:

在IE8及以前版本的浏览器并不支持naturalWidth和naturalHeight属性。

在IE7/8中,我们可以采用new Image()的方式来获取图片的原始尺寸,如下:

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}

// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

IE7+浏览器都能兼容的函数封装:

function getNaturalSize (Domlement) {
 var natureSize = {};
 if(window.naturalWidth && window.naturalHeight) {
  natureSize.width = Domlement.naturalWidth;
  natureSizeheight = Domlement.naturalHeight;
 } else {
  var img = new Image();
  img.src = DomElement.src;
  natureSize.width = img.width;
  natureSizeheight = img.height;
 }
 return natureSize;
}

// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助。如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 #Javascript
js Canvas实现圆形时钟教程
Sep 19 #Javascript
Bootstrap模态框调用功能实现方法
Sep 19 #Javascript
javascript实现的上下无缝滚动效果
Sep 19 #Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
javascript实现的左右无缝滚动效果
Sep 19 #Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
做网页的一些技巧
2007/02/01 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
python 内置函数filter
2017/06/01 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
使用python turtle画高达
2020/01/19 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
信息工作经验交流材料
2014/05/28 职场文书
护理目标管理责任书
2014/07/25 职场文书
团委副书记工作总结
2015/08/14 职场文书