ngx-image-compressor

A utility for compressing images to a proper managable size/quality. Has simplified interface of ngx-image-compress library.

import

npm i ngx-image-compressor

Usage

Import it in your app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxImageCompressorModule } from 'ngx-image-compressor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxImageCompressorModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use it in your component

import { Component } from '@angular/core';
import { NgxImageCompressService, CompressorConfig } from 'ngx-image-compressor';

@Component({
  selector: 'app-root',
  template: `
    <div>
        <input type="file"  (change)="onChange($event)" accept="image/*" multiple />
    </div>
  `
})
export class AppComponent {
  constructor(private imageCompressor: ImageCompressorService) { }
  public onChange(event: any): void {
    const rawFiles: File[] = [].slice.call(event.target.files);
    rawFiles.forEach(async (file: File) => {
      const config: CompressorConfig = { orientation: 1, ratio: 50, quality: 50, enableLogs: true };
      const compressedFile: File = await this.imageCompressor.compressFile(file, config);
      console.log(compressedFile);
    });
  }
}

Running unit tests

Run nx test ngx-image-compressor to execute the unit tests.