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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript File分段上传
Mar 10 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
BootStrap中的表单大全
Sep 07 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 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
ftp类(example.php)
2006/10/09 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
提高网站信任度的技巧
2008/10/17 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
初一体育教学反思
2014/01/29 职场文书
员工考核管理制度
2014/02/02 职场文书
运动会通讯稿500字
2014/02/20 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
教师自我剖析材料
2014/09/29 职场文书
领导干部失职检讨书
2015/05/05 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL