JavaScript 获取图像的宽度

在 Web 开发中，有时我们需要获取图像的宽度。在 JavaScript 中，有多种方式可以实现这个目标。

1. 使用客户端图片对象

如果图像已经被加载到页面中，并以 img 元素显示，那么可以直接使用客户端图片对象获取图像的宽度。

const img = document.querySelector('img');
const width = img.clientWidth;

这里，clientWidth 属性返回元素的可见宽度，不包括边框和外边距。

2. 使用 Image 对象

如果图像尚未被加载到页面中，或需要在 JavaScript 中进行处理，可以使用 Image 对象获取图像的宽度。

const img = new Image();
img.onload = function () {
  const width = this.width;
};
img.src = 'image.jpg';

这里，Image 对象的 onload 事件处理程序将在图像加载完成后执行。一旦加载完成，通过访问 this.width 属性可以获取图像的宽度。

3. 使用 FileReader 对象

如果图像需要从本地计算机上传到服务器，可以使用 FileReader 对象获取图像的宽度。

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function () {
  const file = this.files[0];
  const reader = new FileReader();
  reader.onload = function () {
    const img = new Image();
    img.onload = function () {
      const width = this.width;
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
});

这里，FileReader 对象的 onload 事件处理程序将在读取完成后执行，此时可以创建一个 Image 对象，并通过设置其 src 属性来加载图像。一旦加载完成，通过访问 this.width 属性可以获取图像的宽度。

以上就是使用 JavaScript 获取图像的宽度的三种方法。根据具体情况，选择合适的方法即可。