Angular 5 在使用 ngx-pica Image resizer 时卡住 UI

Question

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

图片尺寸为:(全部同时添加)

• 2.6mb
• 1.7mb
• 3.46mb

我不明白是什么导致了卡住，我们将不胜感激。

我尝试过的事情

我试图删除 changeDetectorRef.detectChanges() 只是为了看看它是否阻止了 UI 卡住，它没有

添加图像而不调整它们的大小可以解决卡住问题(删除对 this._ngxPicaService.resizeImage 的调用)

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

我提供了调整大小的功能，所以我不必限制用户上传的图像大小，但显然卡住的 UI 也是 Not Acceptable

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>

Answer 1

阻止 UI 卡住的答案是网络 worker 。

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

在 Angular 中有一个不错的小包，叫做 https://www.npmjs.com/package/angular2-web-worker 可以帮助你实现 web worker