@digitalascetic/ngx-pica v20.1.2
@digitalascetic/ngx-pica
@digitalascetic/ngx-pica is an Angular (LTS) module to resize images files in browser using pica - high quality image resize in browser.
Important
@digitalascetic/ngx-pica Angular 5 compatibility is under version 1.1.8
$ npm install @digitalascetic/ngx-pica@1.1.8 --save
Install
- Add
ngx-pica
module as dependency to your project.
$ npm install pica exifr @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 {}
Services
- NgxPicaService - Manipulate images using pica - high quality image resize in browser
- NgxPicaImageService - Supplementary services to help you work with images
NgxPicaService Methods
.resizeImages(files: File[], width: number, height: number, options?: NgxPicaResizeOptionsInterface): 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)
- options - Based on pica - resize options, we've also added aspect ratio options:
- keepAspectRatio - Set true to ensure the aspect ratio of the image is maintained as it get resized
- forceMinDimensions - Set true to ensure the dimensions of image resized will be greater than width and height values defined
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, options?: NgxPicaResizeOptionsInterface): Observable<File>
Same as above but only takes one file instead of an array of files.
.compressImages(files: File[], sizeInMB: number): Observable<File>
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
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.
.compressImage(file: File, sizeInMB: number): Observable<File>
Same as above but only takes one file instead of an array of files.
NgxPicaImageService Methods
.isImage(file: File): boolean
This method check if a file is an image or not
Data Structures
export interface AspectRatioOptions {
keepAspectRatio: boolean;
forceDimensions?: boolean;
}
export interface NgxPicaResizeOptionsInterface {
aspectRatio?: AspectRatioOptions;
quality?: number;
alpha?: boolean;
unsharpAmount?: number;
unsharpRadius?: number;
unsharpThreshold?: number;
}
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;
}
Example
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;
});
}
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago