Package Exports

ngx-image-compressor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-image-compressor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.