Angular 5在使用ngx pica图像大小调整器时冻结用户界面

我正在尝试为我的angular 5网站创建一个图像上传工具。它使用ngx Pica来调整客户端图像的大小，但是我在调用调整大小服务时遇到了UI冻结问题，我需要一些关于如何停止冻结的想法

图像尺寸为：（所有尺寸同时添加）

• 2.6mb
• 1.7mb
• 3.46mb

我不明白是什么原因造成了冻结。如果您能提供帮助，我们将不胜感激

我尝试过的事情

我试图删除

changedtectorref.detectChanges（）

，只是想看看它是否能阻止UI冻结，但没有

添加图像而不调整其大小会停止冻结问题（删除对

this.\u ngxPicaService.resizeImage

）

我试图查看源代码，但找不到任何明显的东西

我提供了调整大小的功能，所以我不必限制用户上传的图像大小，但显然冻结的用户界面也是不可接受的

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>

从'@angular/core'导入{组件，视图封装，ChangeDetectorRef}；
从“ngx pica”导入{NgxPicaService、NgxPicaErrorInterface、NGXPICAResizeOptions Interface、NgxPicaImageService}；
从“ngx-pica/src/ngx-pica-resize-options.interface”导入{aspectratioptions}；
@组成部分({
选择器：“az多图像上传器”，
封装：视图封装。无，
templateUrl:“./multiple image uploader.component.html”，
STYLEURL:['./多个图像上载程序.component.scss']
})
导出类MultipleImageUploaderComponent{
公共图像：文件[]=[]；
建造师(
私有_changeDetectorRef:changeDetectorRef，
私有的_ngxPicaService:ngxPicaService，
私有的_ngxPicaImageService:ngxPicaImageService
) { }    
文件更改（输入）{
这个.handleFiles（input.files）；
}
私有添加加载动画（numberToAdd:number）：无效{
var spinner=require（“assets/img/spinner.svg”）；
对于（变量i=0；i{
let reader:FileReader=new FileReader（）；
reader.addEventListener（'load'，（事件：any）=>{
这个.images.splice（listLength，1）；
this.images[listLength]=event.target.result；
listLength+=1；
此._changeDetectorRef.detectChanges（）；
}，假）；
reader.readAsDataURL（图像大小调整）；
}，（错误：NgxPicaErrorInterface）=>{
抛出错误；
});
}
}
移除图像（索引）：无效{
这个.图像.拼接（索引，1）；
}
}
导出类ImageResizeOptions实现NGXPicaResizeOptions接口
{
aspectRatio=新图像AspectratioOptions（true）；
}
导出类ImageAspectRatioOptions实现AspectRatioOptions{
keepasspectratio：布尔；
ForceMindDimensions？：布尔值；
构造函数（keepAspectRatio:boolean，forceMinDimensions？：boolean）{
this.keepAspectRatio=keepAspectRatio；
this.forceMinDimensions=forceMinDimensions；
}
}
图像。。。

阻止UI冻结的答案是Web工作者

我尝试的任务需要很长时间，任何长时间运行的计算都会导致ui冻结

---

在angular中有一个名为

https://www.npmjs.com/package/angular2-web-worker

这将帮助您实现web workers

虽然公认的答案将解决您的“冻结”问题，但可以说更好的解决方案是在服务器端调整图像大小。web workers是否为您解决了此问题？如果是，您能否共享您输入到web worker中的调整大小功能？