JavaScript获取图片的原始尺寸以宽度为例


Posted in Javascript onMay 04, 2014

页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下

<img src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"> 
<script> 
var img = document.getElementsByTagName('img')[0] 
var width = getWH(img, 'width') // 690 
</script>

这里使用的getWH方法是之前文章里提到的。这时候获取的宽度和图片的原始尺寸是一样的。

如果给img加上了width属性,这种方式就不行了,比如图片实际宽度是690,设置了width为400,这时按上面的方式获取则返回400

<img width="400" src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"> 
<script> 
var img = document.getElementsByTagName('img')[0] 
var width = getWH(img, 'width') // 400 
</script>

很明显,400不是图片的原始宽度。

有一种方式可以获取到,直接创建一个新img对象,然后把旧img的src赋值给新的,这时候获取新img的宽度即可

<img width="400" src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"> 
<script> 
function getNaturalWidth(img) { 
var image = new Image() 
image.src = img.src 
var naturalWidth = image.width 
return naturalWidth 
} 
var img = document.getElementsByTagName('img')[0] 
getNaturalWidth(img) // 690 
</script>

需要注意的是,这里新创建的image是不需要添加的DOM文档里的。

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

function getImgNaturalDimensions(img, callback) { 
var nWidth, nHeight 
if (img.naturalWidth) { // 现代浏览器 
nWidth = img.naturalWidth 
nHeight = img.naturalHeight 
} else { // IE6/7/8 
var imgae = new Image() 
image.src = img.src 
image.onload = function() { 
callback(image.width, image.height) 
} 
} 
return [nWidth, nHeight] 
}

注意IE6/7/8的处理,创建了一个新的img,仅设置其src,这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的,可以传一个回调,回调里把原始的宽高作为参数传入。
Javascript 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 #Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 #Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 #Javascript
js日期联动示例
May 02 #Javascript
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python模块的加载讲解
2019/01/15 Python
用Python解决x的n次方问题
2019/02/08 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
建筑系毕业生自我鉴定
2014/01/24 职场文书
秋季运动会广播稿
2014/02/22 职场文书
环境保护标语
2014/06/20 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
股权转让协议书
2014/12/07 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android