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

Posted 2023-03-22

【中文标题】如何获取为浏览器上的文件输入选择的图像尺寸[重复]

【英文标题】：How to get the dimensions of an image selected for a file input on the browser [duplicate]

【发布时间】：2021-12-17 11:33:03

【问题描述】：

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

<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 标记中，那可能会起作用。有没有人有任何工作代码？还是有更好的方法？

【参考方案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);
;