angular - 使用ngx-pica Image resizer时Angular 5冻结UI

我正在尝试为我的5角网站创建一个图像上传工具。它使用ngx pica来调整图像客户端的大小，但是在调用resize服务时，我遇到了ui冻结的问题，我需要一些关于如何阻止它冻结的想法。
图像大小为：（所有同时添加）
2.6兆
170万
346万
我不明白是什么原因造成的冻结，任何帮助都将不胜感激。
我试过的东西
我试着删除changeDetectorRef.detectChanges()只是想看看它是否能阻止用户界面冻结，它没有
添加图像而不调整其大小将停止冻结问题（删除对this._ngxPicaService.resizeImage的调用）
我试过检查源代码，但找不到任何明显的东西
我提供了调整大小的功能，所以我不必限制图像大小的用户上传，但显然冻结的UI也不能接受。

import { Component, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';

import { NgxPicaService, NgxPicaErrorInterface, NgxPicaResizeOptionsInterface, NgxPicaImageService } from 'ngx-pica';
import { AspectRatioOptions } from 'ngx-pica/src/ngx-pica-resize-options.interface';

@Component({
  selector: 'az-multiple-image-uploader',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './multiple-image-uploader.component.html',
  styleUrls: ['./multiple-image-uploader.component.scss']
})
export class MultipleImageUploaderComponent {
    public images: File[] = [];

    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _ngxPicaService: NgxPicaService,
        private _ngxPicaImageService: NgxPicaImageService
    ) { }

    fileChange(input){
        this.handleFiles(input.files);
    }

    private addLoadingAnimations(numberToAdd: number): void {
        var spinner = require("assets/img/Spinner.svg");

        for(var i =0; i < numberToAdd; i++)
        {
            this.images.push(spinner);
        }
    }

    public handleFiles(files: any) {
        var listLength = this.images.length;
        this.addLoadingAnimations(files.length);

        var width = 1024;
        var height = 683;

        for(var index = 0; index < files.length; index++){
            this._ngxPicaService.resizeImage(files[index], width, height, new ImageResizeOptions())
                .subscribe((imageResized: File) => {
                    let reader: FileReader = new FileReader();

                    reader.addEventListener('load', (event: any) => {
                        this.images.splice(listLength, 1);
                        this.images[listLength] = event.target.result;
                        listLength += 1;
                        this._changeDetectorRef.detectChanges();
                    }, false);

                    reader.readAsDataURL(imageResized);

            }, (err: NgxPicaErrorInterface) => {
                throw err.err;
            });
        }
    }

    removeImage(index):void{
        this.images.splice(index, 1);
    }
}

export class ImageResizeOptions implements NgxPicaResizeOptionsInterface
{
  aspectRatio = new ImageAspectRatioOptions(true);
}

export class ImageAspectRatioOptions implements AspectRatioOptions {
  keepAspectRatio: boolean;
  forceMinDimensions?: boolean;

  constructor(keepAspectRatio: boolean, forceMinDimensions?: boolean) {
    this.keepAspectRatio = keepAspectRatio;
    this.forceMinDimensions = forceMinDimensions;
  }
}


<div class="col-8 mx-auto">
    <input type="file" multiple (change)="fileChange(input)" #input class="m-img-upload-btn"/>
    <button class="btn btn-success btn-block" type="button">
        <i class="fa fa-upload"></i> Images...
    </button>
</div>

<div class="card images-container">
    <div *ngFor="let image of images; let i=index;" class="m-image-wrapper">
        <i class="fa fa-times m-delete-img" (click)="removeImage(i)"></i>
        <img [src]="image">
    </div>
</div>

最佳答案

阻止ui冻结的答案是web工作者。
我尝试的任务需要很长时间，任何长时间运行的计算都会导致ui冻结。
在angular中有一个很好的称为https://www.npmjs.com/package/angular2-web-worker的小包，它将帮助您实现web工作者