import {Component} from '@angular/core';
import {NgxImageCompressService} from 'ngx-image-compress';
@Component({
selector: 'app-root',
template: `
<<div *ngFor="let item of imgResultBeforeCompress;let i = index;">
-----------------------------------------------------
<span >
<h1>before</h1>
<img *ngIf="imgResultBeforeCompress[i]" class="responsive" [src]="imgResultBeforeCompress[i]" alt="">
</span>
<span >
<h1>After</h1>
<img *ngIf="imgResultAfterCompress[i]" class="responsive" [src]="imgResultAfterCompress[i]" alt="">
</span>
<div style="float: unset;"></div>
</div>
`
})
export class AppComponent {
constructor(private imageCompress: NgxImageCompressService) {}
imgResultBeforeCompress = [];
imgResultAfterCompress = [];
compressFile() {
this.imageCompress.uploadFile().then(({images, orientation}) => {
this.imgResultBeforeCompress = images;
for(let i = 0; i < images.length; i++){
console.warn('Size in bytes was:', this.imageCompress.byteCount(images[i]));
this.imageCompress.compressFile(images[i], orientation, 50, 50).then(
result => {
this.imgResultAfterCompress.push(result);
console.warn('Size in bytes is now:', this.imageCompress.byteCount(result));
}
);
}
});
}
}