JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法。如下:
<img id="img" src="1.jpg">
<script type="text/javascript">
var img = document.getElementById("img");
console.log(img.innerWidth); //
</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); //
</script>
jQuery的width()方法在底层调用的是innerWidth属性,所以width()方法获取的宽度也不是图片的原始宽度。
那么该怎么获取img元素的原始宽度呢?
naturalWidth / naturalHeight
现代浏览器(包括IE9)为img元素提供了 naturalWidth 和 naturalHeight属性来获取图片的实际宽度与高度 。如下:
var naturalWidth = document.getElementById('img').naturalWidth,
naturalHeight = document.getElementById('img').naturalHeight;
naturalWidth / naturalHeight在各大浏览器中的兼容性如下:
所以,如果不考虑兼容至IE8的,可以放心使用naturalWidth / naturalHeight属性了。
IE7/8中的兼容性实现:
在IE8及以前版本的浏览器并不支持naturalWidth和naturalHeight属性。
在IE7/8中,我们可以采用new Image()的方式来获取图片的原始尺寸,如下:
function getNaturalSize (DomElement) {
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 (DomElement) {
var natureSize = {};
if(window.naturalWidth && window.naturalHeight) {
natureSize.width = DomElement.naturalWidth;
natureSizeheight = DomElement.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;
JS获取图片的原始宽度和高度的更多相关文章
- JS获取图片的原始宽度和高度,兼容IE7,8
naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高. // 封装function getNat ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- 如何通过js和jquery获取图片真实的宽度和高度
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...
- js获取图片的原始尺寸
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- Js获取图片原始宽高
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
- js获取图片信息(一)-----获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...
- 【记录】JS 获取图片原始尺寸-防止图片溢出
示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...
随机推荐
- python 除法总返回浮点
python 除法总返回浮点,要返回整型需要用//: print(type(4/2),type(4//2)) #<class 'float'> <class 'int'>
- Windows 如何在右键中添加“在此处打开CMD窗口”选项
将以下代码保存为XXX.reg,然后双击导入注册表 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\ ...
- 【RefactoringCode】The description of the refactoring book
Last night the book named [Data Structure with Java Hubbed] was closed. When talked about the advant ...
- 关于Android中的四大组件(Service的开启与关闭)
前言 服务(Service)是Android系统中的四大组件之中的一个.服务主要用于两个目的:后台执行和跨进程訪问. 通过启动 一个服务.能够在不显示界面的前提下在后台执行指定的任务,这样能够不影响用 ...
- C++运算符重载的妙用
运算符重载(Operator overloading)是C++重要特性之中的一个,本文通过列举标准库中的运算符重载实例,展示运算符重载在C++里的妙用.详细包含重载operator<<,o ...
- javax.xml.transform.TransformerConfigurationException: Could not compile stylesheet
今天在调代码的时候遇到了一个异常: javax.xml.transform.TransformerConfigurationException: Could not compile styleshee ...
- 数据库操作语句大全(sql)
一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...
- (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作
上午写了下单向循环链表的程序,今天下午我把双向链表的程序写完了.其实双向链表和单向链表也是有很多相似的地方的,听名字可以猜到,每个节点都包含两个指针,一个指针指向上一个节点,一个指针指向下一个节点.这 ...
- astgo-官方功能更新日志
2014年9月 2014-9-7:更新 1.安卓.苹果客户端添加字幕广告(点击字幕跳转打开网址) 2.安卓.苹果客户端添加公告推送功能 3.修正Astgo软交换管理平台修删除充值卡.用户账号,造成整个 ...
- E20170630-ts
displacement n. 取代,替代; 免职,停职; [船] 排水量; [化] 置换;