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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 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
删除数组元素实用的PHP数组函数
2008/08/18 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP解决中文乱码
2017/04/28 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
javascript几个易错点记录
2014/11/26 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
js实现无缝滚动图
2017/02/22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python处理Excel文件实例代码
2017/06/20 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Django模板Templates使用方法详解
2019/07/19 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
建龙钢铁面试总结
2014/04/15 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
电气工程师岗位职责
2014/01/01 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
先进集体申报材料
2014/12/25 职场文书
学校施工安全责任书
2015/01/29 职场文书
男生贾里读书笔记
2015/06/30 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书