获取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

回复

我来回复
  • 暂无回复内容