页面里的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,这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的,可以传一个回调,回调里把原始的宽高作为参数传入。
相关:
http://www.cnblogs.com/snandy/p/3704938.html
http://www.sitepoint.com/html5-responsive-design-image-dimensions/
http://www.w3.org/TR/2011/WD-html5-author-20110705/the-img-element.html#the-img-element
相关推荐
JavaScript 在图片上单击获取图片原始大小.rar
主要介绍了JavaScript如何获取图片的原始尺寸以宽度为例,需要的朋友可以参考下
主要介绍了JavaScript简单获取页面图片原始尺寸的方法,可通过Image()对象直接获取图片的原始宽高,简单实用,需要的朋友可以参考下
在图片上单击获取图片原始大小.rar在图片上单击获取图片原始大小.rar在图片上单击获取图片原始大小.rar在图片上单击获取图片原始大小.rar在图片上单击获取图片原始大小.rar在图片上单击获取图片原始大小.rar
用实例代码讲述了JavaScript如何获取页面图片原始尺寸的方法,现在分享给大家供大家参考学习,有需要的可以一起来看看。
44:___在图片上单击获取图片原始大小 45:___大幅JS焦点图切换 46:___左右切换鼠标可控的无缝图片滚动代码 47:___平滑图片滚动 48:___很有意思的图片分裂复制效果 49:___按比例缩放图片,JavaScript代码 50:___最简的...
VML图片编辑剪裁类,可以在原始图片上进行各种绘制,如图片、文字、长方形、正方形等,还可以支持形状的3D效果,基于javascript+VML,剪裁后可以看到剪裁后的图片保存效果,文件为VS2005项目,附完整演示例子,其他...
12.3.2 获取XMLHttpRequest 对象的信息 356 12.3.3 向服务器发送请求 357 12.3.4 处理服务器响应 360 12.3.5 用户注册实例 361 12.3.6 处理XML请求 364 12.3.7 动态列表 368 第13章 JavaScript安全与异常 处理 371 ...
获取原始图片、我喜欢的水果;创建图片、克隆图片、改变图片、删除图片。为原始图片加上行间样式、以及内部样式
12.3.2 获取XMLHttp,Request对象的信息 12.3.3 向服务器发送请求 12.3.4 处理服务器响应 12.3.5 用户注册实例 12.3.6 处理XML请求 12.3.7 动态列表 第13章 JavaScript安全与异常处理 13.1 JavaScript...
本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容,下面话不多说了,来一起看看详细的介绍吧 方法如下 1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob...
以前,如果图片没有被压缩或者放大,正常展示时比较方便的获取图片的正常尺寸,可是如果设置了其他的尺寸,那就稍微的麻烦一些,得使用new Image()才能获取图片的原始尺寸。现在通过html5的naturalWidth和...
历史原始图像扩展 获取原始的Tistory图片链接 在这里下载:
) 获取当前设备位置后,如果客户端的设备可以,它将对div图片进行动画处理,以向左/向右/向上/向下移动。 即:以x = -4,y = +5加载。 用户将设备稍微向右倾斜,当前x = 2(最初为-4)。 原始+当前:-4 + 2 = -2
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。 主要的是使用js位置知识。 1[removed]:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左...
本项目是一个基于Java语言开发的“星期五”家庭理财系统,包含244个文件,主要文件类型包括JavaScript脚本、JavaScriptX组件、Java源代码、XML配置文件、LESS样式表、YAML配置文件、图片、Markdown文档、JSON配置...
图片 Tonic Data Manager使您可以下载和缓存图像,以便在Web内容中更快地使用。 原始二进制 Tonic Data Manager使您可以下载二进制文件并访问其内容,而无需进行不必要的转换。 文字/ JSON Tonic数据管理器处理常见...
具有角度调整功能的简单JavaScript图像裁剪。 该项目使用来处理拖动角。 该代码实际上并没有进行裁剪,而是允许用户自由设置图像的四个角并获取四个调整点的坐标。 你可以找到一个 表单提交以下参数: original...