Как загрузить изображение в ngx-image-cropper без вызова события imageChangedEvent?

Question

Я разработал кроппер на основе ngx-image-cropper, который позволяет обрезать / вращать некоторые изображения. Для демонстрации спринта я хочу, чтобы изображения отображались при запуске приложения, поэтому мне нужно инициировать изображения на ngx-image-cropper без вызова события fileChangeEvent ().

Это фактический результат, он отлично работает.

Я нажимаю на одну из ссылок (Фото - Подпись - ...), и открывается файл Uploader, чтобы выбрать фотографию для обрезки.

Вот что я хочу:

при доступе к странице в начале, загрузить файл с моего диска, не нажимая на ссылку.

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) Чтобы не было ошибки в console:

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

Лучшим дополнением является ngIf (все может выглядеть так):

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

4) И как добавить bas e64?

Вы можете создать функцию, например, 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/