@digitalascetic/ngx-pica
v20.1.3TypeScript
Angular (LTS) module to resize images files in browser
0/weekUpdated 1 years agoMITUnpacked: 69.6 KB
Published by edezacas
npm install @digitalascetic/ngx-pica@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
``
bash
$ npm install @digitalascetic/ngx-pica@1.1.8 --save
`Install
1. Add module as dependency to your project.
`bash
$ npm install pica exifr @digitalascetic/ngx-pica --save
`
2. Include 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 imagesNgxPicaService Methods
####
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 definedThe 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.
$3
Same as above but only takes one file instead of an array of files.$3
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 MegaBytesThe 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.
$3
Same as above but only takes one file instead of an array of files.NgxPicaImageService Methods
####
This method check if a file is an image or notData 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
ts
import { Component, EventEmitter } from '@angular/core';
import { NgxPicaService } from '@digitalascetic/ngx-pica';@Component({
selector: 'app-home',
template:
(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;
});
}