获取返回 null 的图像尺寸答案

【问题标题】：Getting image dimensions returning null获取返回 null 的图像尺寸
【发布时间】：2020-07-15 07:06:33
【问题描述】：

我在尝试获取上传的图片尺寸时得到一个空值

这是我的代码

<div class="flex-grid" *ngFor="let f of files_dropped">
    <div class="row">
        <div class="col"><ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" id="sky" [file]="f" [removable]="true" (removed)="onRemove(f)"></ngx-dropzone-image-preview></div>
        <div class="col">
            <div class="row">
                <div class="col"><ngx-dropzone-label>{{ f.name }}</ngx-dropzone-label></div>
                <div class="col"><ngx-dropzone-label>({{ f.type }})</ngx-dropzone-label></div>
                <div class="col"><ngx-dropzone-label>({{ f.size }})</ngx-dropzone-label></div>
            </div>
        </div>
    </div>
</div>

  onSelect(event) {
    this.files_dropped.push(...event.addedFiles);
    const formData = new FormData();

    for (var i = 0; i < this.files_dropped.length; i++) {
      formData.append("file[]", this.files_dropped[i]);
      console.log(this.files_dropped[i]);
      var myImg = document.querySelector("#sky") as HTMLImageElement;
      var realWidth = myImg.naturalWidth;
      var realHeight = myImg.naturalHeight;
      alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
    }
  }

这是确切的错误ERROR TypeError: Cannot read property 'naturalWidth' of null。我正在尝试获取每个上传图像的宽度和高度。这是一个堆栈闪电战，它具有我正在使用的上传功能

https://stackblitz.com/edit/ngx-dropzone-mg6mrz

【问题讨论】：

我猜myImg 是空的。尝试检查您的查询选择器是否错误或在图像上传后呈现时的 html 标记，以查看您需要查询的内容。
@tomerpacific 是 myImg 为空，不确定将 id 放在哪里
因为您使用的是角度，所以您根本不应该使用id。将@ViewChild( 'sky') 与<ngx-dropzone-image-preview #sky .. 一起使用。但这只会给你dropzone的组件。从那里你必须找到图像。一种更简单的方法可能是使用直接删除的文件，我假设它包含一个File[]，您可以使用它来获取图像尺寸：developer.mozilla.org/en-US/docs/Web/API/FileReader/…。你能完成stackblitz，让它真正可用吗？然后我可以提供代码
我通过stackblitz.com/edit/… 尝试了的一个活生生的例子。当您将图像放到最后一个区域时，您可以看到已添加到 DOM。所以我认为你的选择器不应该是“#sky”，而是“#sky > img”。但它可能只适用于一张图片，因为您所有的都将具有相同的 id。
@x4rf41 我已经删除了破坏堆栈闪电战的代码stackblitz.com/edit/ngx-dropzone-mg6mrz

标签： javascript html angular dropzone.js

【解决方案1】：

您可以使用https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL 直接使用文件而不使用任何 id：

for (var i = 0; i < this.files_dropped.length; i++) {
  formData.append("file[]", this.files_dropped[i]);
  const reader = new FileReader();
  // this triggers after readAsDataURL() is called
  reader.addEventListener("load", function () {
    // create a new image 
    const img = document.createElement("img") as HTMLImageElement;
    // need to wait for it to be loaded to get the natural dimension
    img.onload = () => {
      console.log(img.naturalWidth, img.naturalHeight);
    }
    // set the data url as src
    img.src = reader.result as string;
  }, false);
  // read the file as a data url (compatible with img.src)
  reader.readAsDataURL(this.files_dropped[i]);
}

重要提示：您无法同步获取图像尺寸，因为必须先加载图像，并且在加载图像之前调用 onSelect 事件。

完整示例：https://stackblitz.com/edit/ngx-dropzone-pu5tep?file=src%2Fapp%2Fapp.component.ts

【讨论】：