正文

轻松掌握：JavaScript中如何准确获取图片原始尺寸

/0 浏览量
0419

在JavaScript中，获取图片的原始尺寸是一个常见的需求，无论是在图片预览、图片展示还是图片处理等方面。下面，我将详细介绍几种方法来帮助你准确获取图片的原始尺寸。

1. 使用Image对象

JavaScript内置的Image对象可以用来获取图片的尺寸。你可以通过创建一个Image对象并设置其src属性为图片的URL，然后使用width和height属性来获取尺寸。

代码示例：

function getImageSize(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(null, { width: this.width, height: this.height });
  };
  img.onerror = function() {
    callback(new Error('Failed to load image'));
  };
  img.src = url;
}

// 使用示例
getImageSize('path/to/your/image.jpg', function(err, size) {
  if (err) {
    console.error(err);
    return;
  }
  console.log('Image width:', size.width);
  console.log('Image height:', size.height);
});

这种方法简单易用，但需要注意，由于浏览器同源策略的限制，如果图片的URL与页面不在同一个域上，那么这种方法可能无法获取到正确的尺寸信息。

2. 使用createObjectURL和FileReader

如果你需要从文件选择器中获取图片的尺寸，可以使用createObjectURL和FileReader来实现。

代码示例：

function getImageSizeFromFile(file, callback) {
  var url = URL.createObjectURL(file);
  var img = new Image();
  img.onload = function() {
    callback(null, { width: this.width, height: this.height });
    URL.revokeObjectURL(url); // 释放资源
  };
  img.onerror = function() {
    callback(new Error('Failed to load image'));
    URL.revokeObjectURL(url); // 释放资源
  };
  img.src = url;
}

// 使用示例
document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  getImageSizeFromFile(file, function(err, size) {
    if (err) {
      console.error(err);
      return;
    }
    console.log('Image width:', size.width);
    console.log('Image height:', size.height);
  });
});

这种方法允许你在本地获取图片的尺寸，不受同源策略的限制。

3. 使用Canvas元素

另一种获取图片尺寸的方法是通过Canvas元素。你可以创建一个Canvas元素，然后将图片绘制到上面，通过Canvas的width和height属性来获取尺寸。

代码示例：

function getImageSizeFromCanvas(file, callback) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var reader = new FileReader();
  reader.onload = function(e) {
    var img = new Image();
    img.onload = function() {
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;
      ctx.drawImage(this, 0, 0);
      callback(null, { width: canvas.width, height: canvas.height });
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

// 使用示例
document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  getImageSizeFromCanvas(file, function(err, size) {
    if (err) {
      console.error(err);
      return;
    }
    console.log('Image width:', size.width);
    console.log('Image height:', size.height);
  });
});

这种方法同样适用于从文件选择器中获取图片的尺寸。

总结

以上介绍了三种在JavaScript中获取图片原始尺寸的方法。你可以根据实际情况选择最适合的方法。无论是从URL获取，还是从文件选择器中获取，这些方法都能帮助你轻松地获取到图片的尺寸信息。

-- 展开阅读全文 --