For Andular 4 use "ng2-image-compress": "1.0.17"

ng2-image-compress

###### ng2-image-compress service is used to compress jpeg or png files on client side browser. It uses using HTML5 Canvas & File API. The compression algorithm is based on libraries angular-image-compress, ng-image-compress and J-I-C project on github.

Installation

To install this library, run:

``bash
$ npm install ng2-image-compress --save
`

Consuming ng2-image-compress library

You can import ng2-image-compress in your Angular application by running:

`bash
$ npm install ng2-image-compress
`

and then from your Angular AppModule:

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

import { AppComponent } from './app.component';

// Import your library
import { ImageCompressService,ResizeOptions,ImageUtilityService } from 'ng2-image-compress';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [ImageCompressService,ResizeOptions],
bootstrap: [AppComponent]
})

export class AppModule { }
`

Once your library is imported, you can use its components, directives in your Angular application:

`xml

Original Image List

Compressed Image List

`


``typescript

import { Component } from '@angular/core';
import { ImageCompressService, ResizeOptions, ImageUtilityService, IImage, SourceImage } from 'ng2-image-compress';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']

})
export class AppComponent {
title = 'app';
selectedImage: any;
processedImages: any = [];
showTitle: boolean = false;

constructor(private imgCompressService: ImageCompressService) {

}
onChange(fileInput: any) {
let fileList: FileList;

let images: Array = [];

ImageCompressService.filesToCompressedImageSource(fileInput.target.files).then(observableImages => {
observableImages.subscribe((image) => {
images.push(image);
}, (error) => {
console.log("Error while converting");
}, () => {
this.processedImages = images;
this.showTitle = true;
});
});

// or you can pass File[]
let files = Array.from(fileInput.target.files);

ImageCompressService.filesArrayToCompressedImageSource(files).then(observableImages => {
observableImages.subscribe((image) => {
images.push(image);
}, (error) => {
console.log("Error while converting");
}, () => {
this.processedImages = images;
this.showTitle = true;
});
});


}

}

License

MIT © [Kamal]