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