Angular 8，IE11，ngx-image-cropper错误，错误TypeError：对象不支持此操作

问题描述

我正在使用Angular 8，ngx-image-cropper：“ ^ 2.0.2”。我在ie11上遇到问题。它在chrome中运行良好，但是在ie11中，当我上传图片时，它开始错误component with cropper并丢弃错误error code。当我尝试移动/调整裁切器大小时，也会发生相同的错误，应用程序也会冻结1秒。 我遇到了“对象不支持属性或方法'toBlob'”的错误，并添加了建议用于ngx-image-cropper的polyfill：“ ^ 2.0.2”在ie11（https://github.com/eligrey/canvas-toBlob.js/blob/master/canvas-toBlob.js）中工作，并且已修复斑点错误。

我注意到，当我调整大小时，我不会收到裁剪的图像。 这是我的图片裁剪器组件中的代码：

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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）