JS获取图片原始尺寸

JS获取图片原始尺寸

在网页开发中，经常会涉及到对图片的操作，比如获取图片的原始尺寸。在JS中，可以通过动态创建一个Image对象来获取图片的原始尺寸。本文将介绍通过JS获取图片原始尺寸的方法，并给出示例代码。

1. 创建Image对象

首先，我们需要创建一个Image对象，然后将图片的src属性设置为要获取尺寸的图片地址。

const img = new Image();
img.src = 'https://example.com/image.jpg';

2. 获取图片尺寸

接下来，我们可以通过Image对象的naturalWidth和naturalHeight属性来获取图片的原始宽度和高度。

img.onload = function() {
  const width = img.naturalWidth;
  const height = img.naturalHeight;

  console.log(`图片的原始尺寸为：宽度 {width}px，高度{height}px`);
};

在上面的示例中，我们通过给img对象的onload事件绑定一个回调函数，确保在图片加载完成后再获取其尺寸信息。

3. 完整示例

下面是一个完整的示例代码，演示如何使用JS获取图片的原始尺寸。

const img = new Image();
img.src = 'https://example.com/image.jpg';

img.onload = function() {
  const width = img.naturalWidth;
  const height = img.naturalHeight;

  console.log(`图片的原始尺寸为：宽度 {width}px，高度{height}px`);
};

4. 运行结果

当执行上述代码时，浏览器会加载指定的图片，并输出图片的原始尺寸信息。注意，由于涉及到图片加载，可能会有一定的延迟。

图片的原始尺寸为：宽度 800px，高度 600px

5. 总结

通过以上方法，我们可以很方便地在JS中获取图片的原始尺寸。这对于一些需要根据图片尺寸进行布局或处理的场景非常有用。