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 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
swiper自定义分页器使用方法详解
Sep 14 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
vue实现购物车案例
2020/05/30 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
企业指导教师评语
2014/04/28 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
白鹤梁导游词
2015/02/06 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL