Javascript - 图像尺寸形成多个文件输入

Question

无法获得尺寸 - 高度和宽度：结果始终是“未定义”。我显然不明白 JavaScript 在这里是如何工作的。但是，我能够显示该文件。

PHP文件包含如下输入标签，选择多张图片：

$output = "<input class=\"wpisNazwyWkladow\" 
id=\"wpis_tabela_zdjecie_wybieracz\" type=\"file\" multiple 
name=\"ads_photofile\">";

这是有问题的 JavaScript 脚本：

var input = $(this); // works
var ilosc = input[0].files.length;
var pliki = input[0].files;

for (var i = 0; i < ilosc; i++)
{
   var tmppath = URL.createObjectURL(pliki[i]); // works - displays
   var nazwa = pliki[i].name; // works
   var tempRozmiar = pliki[i].size; // works
   var typ = pliki[i].type; // typ fotki // works

   // The part that does not work:
   tempWysokosc = tmppath.height;
   tempSzerokosc = tmppath.width;

}

我期待“tempWysokosc”和“tempSzerokosc”的整数值。

需要帮助。

Answer 1

在您的代码中tmppath 是URL.createObjectURL() 的结果，即一个字符串。
这个字符串显然没有width 也没有height。 您想要的是从加载的<img> 元素中检索这些值，该元素的src 将设置为tmppath。但是这个过程总是异步的，所以你可能需要重构你的代码来接受这种异步性：

input.oninput = e => {
const ilosc = input.files.length;
const pliki = input.files;

for (let i = 0; i < ilosc; i++)
{
   const tmppath = URL.createObjectURL(pliki[i]); // works - displays
   const nazwa = pliki[i].name; // works
   const tempRozmiar = pliki[i].size; // works
   const typ = pliki[i].type; // typ fotki // works
   
   const img = new Image();
   // async
   img.onload = e => {
    const tempWysokosc = img.height;
    const tempSzerokosc = img.width;
    console.log({
      name: nazwa,
      size: tempRozmiar,
      type: typ,
      width: tempWysokosc,
      height: tempSzerokosc
    });
   };
   img.src = tmppath;
  }

}

<input id="input" type="file" accept="image/*" multiple>

请注意，如果您有很多想要检索其尺寸的此类图像，您可能会对this Q/A 感兴趣，它公开了一种通过直接读取文件来获取它的方法，避免解码图像的巨大开销。

Answer 2

在您询问高度时，图像可能尚未完全渲染，因此请在 onload 事件之后设置宽度和高度：

tmppath.onload=function() {
    tempWysokosc = tmppath.height;
    tempSzerokosc = tmppath.width;
}

类似答案：Can't get height and width of image in javascript