我正在尝试为我的 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>
最佳答案
阻止 UI 卡住的答案是 Web Workers。
我尝试的任务需要很长时间,任何长时间运行的计算都会导致用户界面卡住。
在 Angular 中,有一个名为 https://www.npmjs.com/package/angular2-web-worker
的漂亮小包,它将帮助您实现 Web Workers
关于使用 ngx-pica 图像缩放器时,Angular 5 卡住 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50977228/