获取img图片原始尺寸代码实例
分类:实例代码
所谓的原始图片尺寸是不经过css样式定义或者img标签的width和height属性定义的尺寸。
而是最为放在那里本来表现出来的尺寸,下面分享一段能够兼容所有浏览器的实例代码,需要的可以做一下参考。
代码实例如下:
function getImgNaturalDimensions(img, callback) { var nWidth, nHeight; if (img.naturalWidth) { // 现代浏览器 nWidth = img.naturalWidth; nHeight = img.naturalHeight; callback(nWidth, nHeight) } else { // IE6/7/8 var imgae = new Image() image.onload = function() { callback(image.width, image.height) } image.src = img.src } }
上面的代码片段能够实现我们的要求,下面对代码进行一下分析。
一.代码注释:
(1).getImgNaturalDimensions(img, callback),第一个参数是img对象,第二个参数是一个回调函数,也就是获取尺寸后要干的事情。
(2).var nWidth, nHeight,声明两个变量,用来存储图片的原始尺寸。
(3).if (img.naturalWidth),判断当前浏览器是否支持naturalWidth,此属性是HTML5新增的,IE9以下浏览器不支持。此属性能够获取图片的原始尺寸。
(4).nWidth = img.naturalWidth,将原始宽度赋值给变量。
(5).nHeight = img.naturalHeight,将原始高度赋值给变量。
(6).callback(nWidth, nHeight),调用回调函数,做一些我们想做的事情。
(7).else {},如果是IE9以下浏览器。
(8).var imgae = new Image(),声明一个图片对象。
(9).image.onload = function() {
callback(image.width, image.height)
},为图片对象注册onload事件处理函数,也就是图片加载完毕触发。
(10).image.src = img.src,进行图片地址赋值。从注释8到这里,其实也可以防止IE9以下浏览器由于缓存不能触发onload事件的现象,这里不多介绍,具体可以参阅相关阅读。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu