ng2-image-compress

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng2-image-compress
7.0.74 years ago5 years agoMinified + gzip package size for ng2-image-compress in KB

Readme

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
<input id="inputImage" type="file" accept="image/*" (change)="onChange($event)" multiple />
ngIf="showTitle">Original Image List
ngFor="let item of processedImages">
<img src="{{item.imageDataUrl}}" height="800" width="1000">
ngIf="showTitle" >Compressed Image List
ngFor="let item of processedImages">
<img src="{{item.compressedImage.imageDataUrl}}" height="800" width="1000">
``` ```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<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;          
});
});
} }

License

MIT © Kamal