图片相关

Posted 2020-10-28 travellingkite

获取图片的原始尺寸

1. 老旧浏览器

function getNaturalSize(img) {
    var image = new Image();
    var naturalSize = {};
    image.src = img.src;
    naturalSize.width = image.width;
    naturalSize.height = image.height;
    return naturalSize
}

var img = document.getElementsByTagName(‘img‘)[0]
getNaturalSize(img); // 返回原始尺寸

分析： 新建一个 image 对象，将当前图片的 src 赋值给 image.src, 此时 image 会发起网络请求从网络下载该图片。此时 image 的宽高就是所求图片的原始尺寸。

1. html5：

htlm 5 提供了一个直接获取图片原始宽高的 API —— naturalWidth / naturalHeight:

function getNaturalSize(img) {
    var naturalSize = {};
    naturalSize.width = img.naturalWidth;
    naturalSize.height = img.naturalHeight;
    return naturalSize;
}

var img = document.getElementsByTagName(‘img‘)[0]
getNaturalSize(img); // 返回原始尺寸

兼容 ie 6/7/8 和现代浏览器的写法：

function getNaturalSize(img, callback) {
  var naturalSize = {};
  if (img.naturalWidth) {
      naturalSize.width = img.naturalWidth;
      naturalSize.height = img.naturalHeight;
      callback(naturalSize);
  } else {
      var image = new Image();
        image.onload = function () {
            naturalSize.width = image.width;
            naturalSize.height = image.height;
            callback(naturalSize);
        }
        image.src = img.src;
    }
}

var img = document.getElementsByTagName(‘img‘)[0]

getNaturalSize(img, function (dimensions) {
    // 图片处理代码
});

判断图片是否加载完成

1. onload 事件
2. onreadyStatechange 事件
3. complate 属性