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 实现对象 匀速/变速运动的方法
May 08 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
Vuex的热更替如何实现
Jun 05 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
输出控制类
2006/10/09 PHP
PHP7匿名类用法分析
2016/09/26 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
vue实现简单图片上传
2020/06/30 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python内置函数的用法实例教程
2014/09/08 Python
Python虚拟环境项目实例
2017/11/20 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
浅析python内置模块collections
2019/11/15 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python如何快速拼接字符串
2020/10/28 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
美国网上订购鲜花:FTD
2016/09/23 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
教师见习期自我鉴定
2014/04/28 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis