获取图像尺寸返回空

Question

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

这是我的代码

<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。我正在尝试获取每个上传图像的宽度和高度。这是一个具有我正在使用的上传功能的 stackblitz

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

Answer 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

获取图像尺寸返回空

Getting image dimensions returning null

html

javascript

dropzone.js

angular