ngx-image-cropper：將源圖像重置為之前裁剪過的圖像

Question

我正在使用ngx-image-cropper庫在我的 Angular 8 項目中裁剪圖像。

我想做的是：

• 我想在選擇文件時在模式中顯示裁剪器。
• 模態有一個裁剪按鈕，單擊該按鈕將裁剪圖像（無自動裁剪）和一個取消按鈕，可用於關閉模態而不裁剪圖像。
• 裁剪圖像后，模態將關閉，並且將有一個編輯按鈕可用於重新裁剪圖像（單擊裁剪時，我基本上裁剪圖像並隱藏模態。因此，單擊編輯時，我只顯示再次隱藏模態。）。
• 如果從文件輸入中選擇了另一個文件，模態將與新圖像一起顯示。 用戶可以裁剪或取消。 如果取消，我想將裁剪器的源圖像重置為上一個圖像。 我怎樣才能做到這一點？

我嘗試了以下方法，但不起作用：

    lastCropperPosition: CropperPosition;
    lastCroppedImage: any;

    crop() {
        this.imageCropper.crop();
        this.lastCropperPosition = this.getCurrentCropperPosition();
        this.lastCroppedImage = new ElementRef(
          this.imageCropper.sourceImage.nativeElement
        );
        this.logoModal.hide();
    }

    cancelCrop() {
        if (this.lastCroppedImage) {
          this.imageCropper.sourceImage = this.lastCroppedImage;
        }

        if (this.lastCropperPosition) {
          this.imageCropper.cropper = this.getLastCropperPosition();
        }

        this.logoModal.hide();
    }

    getCurrentCropperPosition() {
        return {
          x1: this.imageCropper.cropper.x1,
          x2: this.imageCropper.cropper.x2,
          y1: this.imageCropper.cropper.y1,
          y2: this.imageCropper.cropper.y2
        };
    }

    getLastCropperPosition() {
        return {
          x1: this.lastCropperPosition.x1,
          x2: this.lastCropperPosition.x2,
          y1: this.lastCropperPosition.y1,
          y2: this.lastCropperPosition.y2
        };
    }

HTML代碼：

    <div bsModal #logoModal="bs-modal" class="modal fade" tabindex="-1"
      role="dialog" aria-labelledby="logoModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Crop Image</h4>
          </div>
          <div class="modal-body">
            <image-cropper
              [imageChangedEvent]="imageChangedEvent"
              [maintainAspectRatio]="true"
              [aspectRatio]="rules.logo.maxWidth / rules.logo.maxHeight"
              [cropperMinWidth]="rules.logo.minWidth"
              [resizeToWidth]="rules.logo.maxWidth"
              [autoCrop]="false"
              onlyScaleDown="true"
              outputType="both"
              (imageCropped)="imageCropped($event)"
              (imageLoaded)="imageLoaded()"
              (cropperReady)="cropperReady()"
              (loadImageFailed)="loadImageFailed()"></image-cropper>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-secondary"
              (click)="cancelCrop()">Cancel</button>
            <button type="button" class="btn btn-sm btn-primary"
              (click)="crop()">Crop</button>
          </div>
        </div>
      </div>
    </div>

使用sourceImage屬性是做我想做的事情的正確方法嗎？ 我只在crop() 方法中更改this.lastCroppedImage 。 但每當在文件輸入中選擇新圖像時，它似乎都會發生變化。 為什么會這樣？

PS：我已經嘗試過直接分配sourceImage而不創建新的ElementRef 。 那也行不通。

Stackblitz 示例： https ://stackblitz.com/edit/image-cropper-r5pyqh

在 Stackblitz 中重現的步驟：

Browse and crop an image.
Browse again and select new image.
Click cancel in the crop window.
Click recrop. Observe that the image in crop window is the second one. Instead I want the first one.

Answer 1

您可以創建一個變量來存儲以前的圖像，當您想要重新裁剪時，只需將其分配給圖像的src 。 讓我舉個例子：

ImageCropperComponent.ts：

@Input() imgToBeSet: any;
@Input() showPrevImage: false;
@Output() cropperReady = new EventEmitter<any>();

ngOnChanges(changes: SimpleChanges): void {
    if (this.imgToBeSet && this.showPrevImage){
      console.log('***** set prev image');
      this.safeImgDataUrl = this.imgToBeSet;
    }  
}

AppComponent.ts ：

currentImgUrl: any;
recropImage: false;

reCrop() {
    this.logoModal.show();
    this.recropImage = true;
}

cropperReady(eventArgs: any) {
    if (!this.currentImgUrl) {
        this.currentImgUrl = eventArgs.currentImgUrl;
        console.log(`currentImgUrl is`, this.currentImgUrl);
    }
}

AppComponent.html :

<div class="modal-body">
    <image-cropper
    #imageCropper
      [imageChangedEvent]="imageChangedEvent"
      [maintainAspectRatio]="true"
      [aspectRatio]="4 / 3"
      [autoCrop]="false"
      [imgToBeSet] = "currentImgUrl"
      [showPrevImage] = "recropImage"
      onlyScaleDown="true"
      outputType="both"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded()"
      (cropperReady)="cropperReady($event)"
      (loadImageFailed)="loadImageFailed()"></image-cropper>
  </div>

完整的例子可以在 stackblitz 看到。

Answer 2

請使用一個函數來重置它，如：

   resetImage() {
        this.scale = 1;
        this.rotation = 0;
        this.canvasRotation = 0;
        this.transform = {};
    }

在這里，我添加了stackblitz以便您了解。