微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。