正文

掌握JS获取图片原始尺寸的小技巧

/0 浏览量
1110

在网页开发中，有时候我们需要获取图片的原始尺寸，以便进行布局调整或者图片处理。JavaScript 提供了多种方法可以帮助我们实现这一功能。下面，我将详细介绍几种获取图片原始尺寸的小技巧。

方法一：使用 Image 对象

Image 对象是 HTML5 新增的一个对象，可以用来在网页中嵌入图片。通过创建一个 Image 对象，并设置其 src 属性为需要获取尺寸的图片地址，然后读取其 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('图片加载失败'));
  };
  img.src = url;
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
  if (err) {
    console.error(err);
  } else {
    console.log('图片尺寸：', size);
  }
});

方法二：使用 canvas 元素

canvas 元素是 HTML5 新增的一个画布，可以用来绘制图形和图像。通过创建一个 canvas 元素，并使用 drawImage 方法将图片绘制到画布上，然后读取画布的 width 和 height 属性，就可以得到图片的原始尺寸。

function getImageSize(url, callback) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0);
    callback(null, { width: canvas.width, height: canvas.height });
  };
  img.onerror = function() {
    callback(new Error('图片加载失败'));
  };
  img.src = url;
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
  if (err) {
    console.error(err);
  } else {
    console.log('图片尺寸：', size);
  }
});

方法三：使用 CSS 属性

通过设置图片的 CSS 属性 width 和 height 为 100%，然后读取图片的 offsetWidth 和 offsetHeight 属性，可以得到图片的原始尺寸。

function getImageSize(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(null, { width: this.offsetWidth, height: this.offsetHeight });
  };
  img.onerror = function() {
    callback(new Error('图片加载失败'));
  };
  img.src = url;
  img.style.width = '100%';
  img.style.height = 'auto';
}

// 使用示例
getImageSize('https://example.com/image.jpg', function(err, size) {
  if (err) {
    console.error(err);
  } else {
    console.log('图片尺寸：', size);
  }
});

总结

以上三种方法都可以用来获取图片的原始尺寸。在实际应用中，可以根据具体需求选择合适的方法。需要注意的是，在使用这些方法时，需要处理图片加载失败的情况，以避免程序崩溃。

-- 展开阅读全文 --