7.0.7 • Published 5 years ago
ng2-image-compress v7.0.7
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:
$ npm install ng2-image-compress --save
Consuming ng2-image-compress library
You can import ng2-image-compress in your Angular application by running:
$ npm install ng2-image-compress
and then from your Angular AppModule
:
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:
<!-- Example app.component.html -->
<!-- <h2>Here are some links to help you start: </h2>
<input id="testid" type="file" accept="image/*" multiple ng2-image-compress /> -->
<div>
<input id="inputImage" type="file" accept="image/*" (change)="onChange($event)" multiple />
<b *ngIf="showTitle">Original Image List</b>
<div *ngFor="let item of processedImages">
<img src="{{item.imageDataUrl}}" height="800" width="1000">
</div>
<b *ngIf="showTitle" >Compressed Image List</b>
<div *ngFor="let item of processedImages">
<img src="{{item.compressedImage.imageDataUrl}}" height="800" width="1000">
</div>
</div>
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]
7.0.7
5 years ago
7.0.6
5 years ago
7.0.5
5 years ago
1.0.19
5 years ago
7.0.4
5 years ago
7.0.3
5 years ago
7.0.2
5 years ago
7.0.1
5 years ago
7.0.0
5 years ago
1.0.18
5 years ago
1.0.17
6 years ago
1.0.16
6 years ago
1.0.15
6 years ago
1.0.14
7 years ago
1.0.13
7 years ago
1.0.12
7 years ago
1.0.11
7 years ago
1.0.10
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago