@digitalascetic/ngx-pica is an Angular (LTS) module to resize images files in browser using pica - high quality image resize in browser.
@digitalascetic/ngx-pica Angular 5 compatibility is under version 1.1.8
$ npm install @digitalascetic/ngx-pica@1.1.8 --save
- Add
ngx-pica
module as dependency to your project.
$ npm install @digitalascetic/ngx-pica --save
- Include
NgxPicaModule
into your main AppModule or in module where you will use it.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxPicaModule } from '@digitalascetic/ngx-pica';
@NgModule({
imports: [
BrowserModule,
NgxPicaModule
],
declarations: [ AppComponent ],
exports: [ AppComponent ]
})
export class AppModule {}
- NgxPicaService - Manipulate images using pica - high quality image resize in browser
- NgxPicaImageService - Supplementary services to help you work with images
.resizeImages(files: File[], width: number, height: number, useWebWorker?: boolean): Observable<File>
This method resize an array of images doing it sequentially to optimize CPU and memory use.
- files:[] - Array of images to resize
- width - Width to be resized (px)
- height - Height to be resized (px)
- useWebWorker - optional, use multi-thread web worker, fallback to run in main-thread (default: true)
The Observable receives a next on every file that has been resized. If something goes wrong the Observable receive an error.
All errors are wrapped by NgxPicaErrorInterface.
.resizeImage(file: File, width: number, height: number, useWebWorker: boolean = true): Observable<File>
Same as above but only takes one file instead of an array of files.
This method compress an array of images doing it sequentially to optimize CPU and memory use.
- files:[] - Array of images to resize
- sizeInMB - File size in MegaBytes
- useWebWorker - optional, use multi-thread web worker, fallback to run in main-thread (default: true)
The Observable receives a next on every file that has been resized. If something goes wrong the Observable receive an error.
All errors are wrapped by NgxPicaErrorInterface.
Same as above but only takes one file instead of an array of files.
This method check if a file is an image or not
export enum NgxPicaErrorType {
NO_FILES_RECEIVED = 'NO_FILES_RECEIVED',
CANVAS_CONTEXT_IDENTIFIER_NOT_SUPPORTED = 'CANVAS_CONTEXT_IDENTIFIER_NOT_SUPPORTED',
NOT_BE_ABLE_TO_COMPRESS_ENOUGH = 'NOT_BE_ABLE_TO_COMPRESS_ENOUGH'
}
export interface NgxPicaErrorInterface {
err: NgxPicaErrorType;
file?: File;
}
import { Component, EventEmitter } from '@angular/core';
import { NgxPicaService } from '@digitalascetic/ngx-pica';
@Component({
selector: 'app-home',
template: `
<img *ngFor="let image of images" [src]="image" />
<input type="file" [attr.accept]="image/*" multiple
(change)="handleFiles($event)">
`
})
export class AppHomeComponent {
images: File[] = [];
constructor(private _ngxPicaService: NgxPicaService) {
}
public handleFiles(event: any) {
const files: File[] = event.target.files;
this._ngxPicaService.resizeImages(files, 1200, 880)
.subscribe((imageResized: File) => {
let reader: FileReader = new FileReader();
reader.addEventListener('load', (event: any) => {
this.images.push(event.target.result);
}, false);
reader.readAsDataURL(imageResized);
}, (err: NgxPicaErrorInterface) => {
throw err.err;
});
}