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 相关文章推荐
如何在一个页面显示多个百度地图
Apr 07 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
使用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
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python sys.argv用法实例
2015/05/28 Python
python异常和文件处理机制详解
2016/07/19 Python
django反向解析和正向解析的方式
2018/06/05 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Django框架模板的使用方法示例
2019/05/25 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
深入了解python列表(LIST)
2020/06/08 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
物流经理自我评价
2013/09/23 职场文书
六十大寿答谢词
2014/01/12 职场文书
妇产医师自荐信
2014/01/29 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2015年科室工作总结
2015/04/10 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB