Angular toolkit to crop, resize or compress images in the browser.
npm install ng2-img-tools
HTMLCanvasElement.toBlob() and there seems to be a problem with zone.js and the available polyfills. Pull requests to solve this problem are welcome.
HtmlCanvasElement.toBlob(): https://www.npmjs.com/package/blueimp-canvas-to-blob
bash
$ npm install blueimp-canvas-to-blob --save
`
Install
`bash
$ npm install ng2-img-tools --save
`
$3
`TypeScript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2ImgToolsModule } from 'ng2-img-tools'; // <-- import the module
import { MyComponent } from './my.component';
@NgModule({
imports: [BrowserModule,
Ng2ImgToolsModule // <-- include it in your app module
],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
`
Usage
`TypeScript
import { Ng2ImgToolsService } from 'ng2-img-tools';
[...]
constructor(private ng2ImgToolsService: Ng2ImgToolsService) {
this.ng2ImgToolsService.resize([someImage], 2000, 1000).subscribe(result => {
//all good, result is a file
console.info(result);
}, error => {
//something went wrong
//use result.compressedFile or handle specific error cases individually
});
}
}
`
Methods
All the methods return an Observable, which onNext either gets a file if everything went as planned or an error object if something went wrong. Please see the example above in Usage to see how to check if the returned value is a File.
All the methods furthermore have a method for a single file as input aswell, which are named e.g. cropImage, resizeImage, etc.
$3
#### IMPORTANT: Catch error cases
When using the compression methods you should make sure to catch the error cases.
If an error happens, you will receive an object with the following properties:
compressedFile:File, reason: string and error:string
Possible errors are:
INVALID_EXTENSION: File provided is neither of type jpg nor of type png). The compressedFile is the original file.
PNG_WITH_ALPHA: File provided is a png image which uses the alpha channel. No compression possible unless ignoreAlpha is set to true. The compressedFile is the original file.
MAX_STEPS_EXCEEDED: Could not find the correct compression quality in 15 steps - abort. This should rarely to never at all happen. The compressedFile is the result of step 15 of the compression.
FILE_BIGGER_THAN_INITIAL_FILE: This should actually never happen, just a precaution. The compressedFile is the original file.
UNABLE_TO_COMPRESS_ENOUGH: Could not compress image enough to fit the maximal file size limit. The compressedFile is a compression as close as it can get.
#### compress(files: File[], maxSizeInMB: number, ignoreAlpha: boolean = false, logExecutionTime: boolean = false): Observable
Method to compress an image. This reduces the quality of an image down until it fits a certain fileSize which is given as maxSizeInMB.
Set ignoreAlpha to true if you want to ignore the alpha channel for png images and compress them nonetheless (not recommended - the alpha channel will be lost and the resulting image might differ from the original image).
Returns an observable that for every file given, onNext receives either a File when everything went as planned or an error Object if something went wrong.
$3
#### resize(files: File[], maxWidth: number, maxHeight: number, logExecutionTime: Boolean = false): Observable
Method to resize files if necessary down to a certain maximal width or maximal height in px. If you want only one limit just set the other max to a very high value: for example resize([myfile1,myfile2],2000,10000).subscribe([...]
$3
#### crop(files: File[], toWidth: number, toHeight: number, startX: number = 0, startY: number = 0): Observable
Crops the given files down to the given width and height. startX and startY tell where the cropping should start as coordinates.
$3
#### public resizeExactCrop(files: File[], toWidth: number, toHeight: number): Observable
Resizes an image exactly down to the given width and height. To do so, the image will first be resized, then cropped based on the center of the image so to keep the most likely most important part of the image. The proportions width to height are kept.
#### public resizeExactFill(files: File[], toWidth: number, toHeight: number, fillColor?: string): Observable
Resizes an image exactly down to the given width and height. To do so, the image will first be resized, then the rest of the width / height will be filled with the fillColor. The image will be positioned to the center of the image. The proportions width to height are kept.
$3
#### getEXIFOrientedImage(image:HTMLImageElement): Promise