如何获取为浏览器上的文件输入选择的图像的尺寸

Question

我有一个图片上传框。标准的东西：

<input id="image-upload-input" type="file" />

一旦用户选择了一个文件，我就可以访问内容并将其通过 Axios 发送到我的 API，如下所示：

const imageUploadInput = document.getElementById("image-upload-input");
const file = imageUploadInput.files[0];
if (!file) {
  return;
}

const reader = new FileReader();
const component = this;

reader.onload = function (event) {
  axios.post("upload/image", Buffer.from(event.target.result));
};
reader.readAsArrayBuffer(file);

但是，我对尺寸有一些限制，想在客户端检查一下。

我相当确定可以做到。我还没有尝试过，但我想如果我只是将数据弹出到一个（理想情况下不可见的）带有数据 src 属性的 img 标签中，那可能会起作用。有没有人有任何工作代码？或者更好的方法？

Answer 1

添加类似这样的内容应该有效

imageUploadInput.onchange = function (event) {
  const file = imageUploadInput.files[0];
  if (!file) {
    return;
  }
  const image = new Image();
  image.onload = function() {
    console.log(this.width, this.height);
  }
  image.src = URL.createObjectURL(file);
};

如何获取为浏览器上的文件输入选择的图像的尺寸

How to get the dimensions of an image selected for a file input on the browser

javascript

file-upload

image