For Andular 4 use "ng2-image-compress": "1.0.17"
```
```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) {
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 AngularAppModule:
```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:
AppComponentBrowserModule<input id="inputImage" type="file" accept="image/*" (change)="onChange($event)" multiple />ngFor="let item of processedImages">
ngIf="showTitle" >Compressed Image List
<img src="{{item.imageDataUrl}}" height="800" width="1000">ngFor="let item of processedImages">
<img src="{{item.compressedImage.imageDataUrl}}" height="800" width="1000">let fileList: FileList;let images: Array<IImage> = [];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; });});