如何在不調用 imageChangedEvent 事件的情況下在 ngx-image-cropper 上加載圖像？

Question

我開發了一個基於 ngx-image-cropper 的裁剪器，它允許裁剪/旋轉一些圖像。 對於sprint的demo，我希望在應用程序啟動時顯示圖像，所以我需要在不調用fileChangeEvent()事件的情況下在ngx-image-cropper上啟動圖像。

這是實際結果，它工作正常。

我單擊其中一個鏈接（照片 - 簽名 - ...），然后打開文件上傳器以選擇要裁剪的照片。

這就是我想要的：

在開始訪問頁面時，從我的磁盤加載文件，而無需單擊鏈接。

Ps：我正在使用 Angular 8

這里是裁剪器的代碼：

       <mat-card-content style="padding:3% 5%; text-align: center; ">
          <image-cropper [ngClass]=" loaded && showCropper && !cropped ? 'showCropper' : 'hideCropper' "
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="false"
            [containWithinAspectRatio]="containWithinAspectRatio"
            [aspectRatio]="5 / 3"
            [cropperMinWidth]="128"
            [onlyScaleDown]="true"
            [roundCropper]="false"
            [canvasRotation]="canvasRotation"
            [transform]="transform"
            [alignImage]="'center'"
            [style.display]="showCropper ? null : 'none'"
            format="png"
            (imageCropped)="imageCropped($event)"
            (imageLoaded)="imageLoaded()"
            (cropperReady)="cropperReady($event)"
            (loadImageFailed)="loadImageFailed()"
          >
          </image-cropper>
          <img
            *ngIf="loaded && !showCropper && cropped"
            class="document-photo"
            [src]="croppedImage"
          />
          <div *ngIf="!loaded" class="divNone"></div>
          <div class="icon-image">
            <mat-icon (click)="rotateLeft()">rotate_left</mat-icon>
            <mat-icon (click)="rotateRight()">rotate_right</mat-icon>
            <mat-icon (click)="activateCrop()">crop</mat-icon>
            <mat-icon (click)="clearImage()">clear</mat-icon>
            <mat-icon (click)="validate()">check</mat-icon>
            <mat-icon>note_add</mat-icon>
          </div>
        </mat-card-content>

---

        <mat-list-item class="item-doc text-blue-in">
              <mat-icon class="icon-info" matTooltipPosition="above" matTooltip="Info about the photo">info</mat-icon>
              <mat-icon *ngIf="!photo" class="text-grey-in">check_box_outline_blank</mat-icon>
              <mat-icon *ngIf="photo" class="text-grey-in">check_box</mat-icon>
              <input style="visibility: hidden; display: none;" #linkPhoto type="file" (change)="fileChangeEvent($event, 'photo')"/>
              <mat-label class="doc-title text-grey-in" (click)="onLoadPhoto()" >Photo</mat-label>
              <mat-icon *ngIf="photoSent" class="icon-edit" (click)="editPhoto()">edit</mat-icon                  >
        </mat-list-item>

---

所以問題是：如何在 ngx-image-cropper 中從磁盤加載圖像而不調用 fileChangedEvent ？

Answer 1

1）如果您不想使用上傳器/打開窗口（從輸入文件）選擇圖像並從項目目錄（例如資產/圖像）加載圖像或將其作為字符串（base64）輸入，則必須添加一個輸入：

[imageBase64] = "imageBase64String"

其中 imageBase64String 不是 (../../assets/image.jpg)

但是base64的值(date:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA.....)

2）作者寫道：

“所有輸入都是可選的。應該設置 imageChangedEvent、imageBase64 或 imageFile 以將圖像加載到裁剪器中。”

和

輸入 imageBase64（字符串）：

“如果你不想使用文件輸入，你可以直接設置一個base64圖像，它會被加載到裁剪器中”

3）為了在控制台中沒有錯誤：

"ERROR Error: Uncaught (in promise): Event: {" isTrusted ": true}"

最好的添加是 ngIf（所有可能看起來像這樣）：

<image-cropper
  *ngIf="imageBase64String"
  [imageChangedEvent]="imageChangedEvent"
  [imageBase64]="imageBase64String"
  ...
  ></image-cropper>

4）以及如何添加base64？

您可以創建一個函數，例如getBase64FromFile(img) {...}並使用XMLHttpRequest() + FileReader()並將結果分配給this.imageBase64String = (base64 as any).result

當 ngx-image-cropper 加載時，例如

ngAfterViewInit (): void {
  this.getBase64FromFile('../../assets/image.jpg');
}

看，這里很有趣http://www.programmersought.com/article/52582038406/