ngx-image-cropper imageloaded() 没有将任何图像数据传递给打字稿文件事件方法答案

【问题标题】：ngx-image-cropper imageloaded() not passing any image data to typescript file event methodngx-image-cropper imageloaded() 没有将任何图像数据传递给打字稿文件事件方法
【发布时间】：2021-04-08 14:46:33
【问题描述】：

我正在使用ngx-image-cropper 来加载和裁剪图像。根据文档有

(imageLoaded)="imageLoaded($event)"

但是当我进入打字稿调试方法“imageLoaded()”时，图像未定义！它没有向方法传递任何东西。

在库的代码中可以看到这个

imageLoaded: EventEmitter<void>;

所以看起来事件没有通过任何东西，即使文档说它确实如此。就我如何访问加载的图像而言，我在这里遗漏了什么吗？

问题 - 文档没有显示在 html 中传递的任何内容，我应该传递 '$event' 吗？

  imageLoaded(image: HTMLImageElement) {
    // image is undefined
  }

<image-cropper
                [imageChangedEvent]="imageChangedEvent"
                [maintainAspectRatio]="true"
                [aspectRatio]="4/3"
                format="png"
                [transform]="transform"
                (imageCropped)="imageCropped($event)"
                (imageLoaded)="imageLoaded($event)"
                (loadImageFailed)="loadImageFailed()">
</image-cropper>

【问题讨论】：

标签： javascript html angular typescript ngx-image-cropper

【解决方案1】：

没错！为了在方法中包含事件，您需要从 html 参数中传递“$event”

【讨论】：

【解决方案2】：

您确实需要将 $event 传递给将被调用的函数，尽管文档目前没有显示：

(imageLoaded)="imageLoaded($event)"

然后在被调用的函数中，你可以像这样获取数据（LoadedImage参考文档）：

imageLoaded( img: LoadedImage ) {
    const width = img.original.size.width;
    const height = img.original.size.height;
}

【讨论】：