Блог

Я использую Angular 8, ngx-image-cropper: «^ 2.0.2». В ie11 у меня проблема с программой обрезки. Он отлично работает в Chrome, но в ie11, когда я загружаю изображение, он начинает прослушивать компонент с помощью программы обрезки и выдает код ошибки. Та же ошибка возникает, когда я пытаюсь переместить / изменить размер программы обрезки, приложение также зависает на 1 секунду. У меня возникла ошибка, объект не поддерживает свойство или метод ‘toBlob’, и я добавил полизаполнение, которое предлагается для ngx-image-cropper: «^ 2.0.2» для работы в ie11 (https://github.com/eligrey/canvas-toBlob.js/blob/master/canvas-toBlob.js), и это исправило ошибку blob.

Я заметил, что при изменении размера я не получаю обрезанное изображение обратно. Вот код из моего компонента для обрезки изображений:

 import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ResponsiveComponent } from '../../../core/component/responsive.component';

@Component({
  selector: 'app-image-cropper-dialog',
  templateUrl: './image-cropper-dialog.component.html',
  styleUrls: ['./image-cropper-dialog.component.scss']
})
export class ImageCropperDialogComponent extends ResponsiveComponent implements OnInit {

  /**
   * Cropped image
   */
  croppedImage: File;

  /**
   * Sting representation of a cropped image
   */
  base64: string;

  /**
   * Constructor
   */
  constructor(
    public dialogRef: MatDialogRef<ImageCropperDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data,
  ) {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

  /**
   * Close dialog
   */
  closeDialog(): void {
    this.dialogRef.close();
  }

  /**
   * On image save
   */
  onCrop(): void {
    this.dialogRef.close({
      file: this.croppedImage,
      base64: this.base64
    });
  }

  /**
   * On image loaded
   */
  imageLoaded(): void {}

  /**
   * On image cropped
   */
  imageCropped(event): void {
    this.croppedImage = new File([event.file], this.data.image.name);
    this.base64 = event.base64;
  }
}
// html code
<div class="c-dialog__content cover" mat-dialog-content>
        <image-cropper [imageFile]="data.image"
                       [maintainAspectRatio]="data.aspectRatio ? true : false"
                       [aspectRatio]="data.aspectRatio ? data.aspectRatio : 1"
                       [outputType]="'both'"
                       [resizeToWidth]="data.resizeTo ? data.resizeTo : 1200"
                       (imageCropped)="imageCropped($event)"
                       (imageLoaded)="imageLoaded()"
                       style="transition: opacity 300ms ease">
        </image-cropper>

        <p class="color-silver-chalice with-padding">
            Move and resize the selection until you are happy with the preview and then click Save.
        </p>
    </div>

    <div class="c-dialog__actions o-flex-justify-end" mat-dialog-actions>
        <button *ngIf="from1024"
                (click)="onCrop()"
                mat-flat-button
                class="c-dialog__save"
                color="primary"
                [disabled]="!croppedImage">
            Crop
        </button>
    </div>