使用 angualr4 如何使用 ngx-image-cropper 和cropper x1,y1 和 x2,y2 位置获取图像文件的实际宽度和大小答案

【问题标题】：Using angualr4 how to get image file actual width and size with ngx-image-cropper and cropper x1,y1 and x2,y2 positions使用 angualr4 如何使用 ngx-image-cropper 和cropper x1,y1 和 x2,y2 位置获取图像文件的实际宽度和大小
【发布时间】：2018-06-25 04:05:58
【问题描述】：

我正在尝试使用 ngx-image-cropper 和 angular4 获取文件图像的原始大小、宽度和高度，以及如何获取裁剪图像的左上角、左下角、右上角、右下角坐标。

【问题讨论】：

不确定，但imageCropped 事件发射器会发出图像的所有信息。尝试记录你绑定到imageCropped<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3" [resizeToWidth]="128" format="png" (imageCropped)="imageCropped($event)" ></image-cropper>的事件参数

标签： angular

【解决方案1】：

我不确定这是否是您想要的，但我得到了当前的宽度、高度、x1、y1 设置 [cropper] 输入属性

<image-cropper
      [imageChangedEvent]="imageChangedEvent"
      [maintainAspectRatio]="true"
      [aspectRatio]="2 / 1"
      [resizeToWidth]="192"
      [cropper] =" coordinates" //this get the current coordinates
      format="png"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded($event)"
      (loadImageFailed)="loadImageFailed()"
  ></image-cropper>

并在 .ts 文件中创建一个坐标对象，在这种情况下，对象名称是坐标

export class ImageHolderComponent implements OnInit {

  coordinates = {x:0} // object that saves the crop coordinates
}

【讨论】：