ngx-image-compress
Advanced tools
Angular utility for compressing images to a satisfying size, that you can choose
Angular utility for compressing images to a satisfying size, that you can choose
npm i ngx-image-compress
npm install ngx-image-compress@view-engineAngular 13+ differ as there is no need to import the service in your module. You can inject the service in the constructor of your component
directly.
For any angular version before 13, you should first import the service in your module, like this:
import {NgxImageCompressService} from 'ngx-image-compress';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [NgxImageCompressService],
bootstrap: [AppComponent],
})
export class AppModule {}
Here how to use the service in your component.
This option is giving control over the compression process.
compressFile() signature is detailed here
import {Component} from '@angular/core';
import {NgxImageCompressService} from 'ngx-image-compress';
@Component({
selector: 'app-root',
template: `
<button (click)="compressFile()">Upload and compress Image</button>
<img [src]="imgResultBeforeCompression" *ngIf="imgResultBeforeCompression" />
<img [src]="imgResultAfterCompression" *ngIf="imgResultAfterCompression" />
`,
})
export class AppComponent {
constructor(private imageCompress: NgxImageCompressService) {}
imgResultBeforeCompression: string = '';
imgResultAfterCompression: string = '';
compressFile() {
this.imageCompress.uploadFile().then(({image, orientation}) => {
this.imgResultBeforeCompression = image;
console.log('Size in bytes of the uploaded image was:', this.imageCompress.byteCount(image));
this.imageCompress
.compressFile(image, orientation, 50, 50) // 50% ratio, 50% quality
.then(compressedImage => {
this.imgResultAfterCompression = compressedImage;
console.log('Size in bytes after compression is now:', this.imageCompress.byteCount(compressedImage));
});
});
}
}
Quicker and effortless method.
Getting directly an image at a maximum of "X" MegaBytes, using a built-in algorithm:
import {Component} from '@angular/core';
import {NgxImageCompressService} from 'ngx-image-compress';
@Component({
selector: 'app-root',
template: `
<button (click)="compressFile()">Upload and compress Image</button>
<img [src]="imgResult" *ngIf="imgResult" />
`,
})
export class AppComponent {
constructor(private imageCompress: NgxImageCompressService) {}
imgResult: string = '';
compressFile() {
const MAX_MEGABYTE = 2;
this.imageCompress
.uploadAndGetImageWithMaxSize(MAX_MEGABYTE) // this function can provide debug information using (MAX_MEGABYTE,true) parameters
.then(
(result: string) => {
this.imgResult = result;
},
(result: string) => {
console.error(
"The compression algorithm didn't succed! The best size we can do is",
this.imageCompress.byteCount(result),
'bytes'
);
this.imgResult = result;
}
);
}
}
this.imageCompress.getImageWithMaxSizeAndMetas({image: 'base64ValueFromYourUpload'},MAX_MEGABYTE).then
For uploading multiple files, instead of using
this.imageCompress.uploadFile()
.then((singleFile: { image: string, fileName:string, orientation: number }) => //...
You can use
this.imageCompress.uploadMultipleFiles()
.then((arrayOfFiles: { image: string, fileName:string, orientation: number }[]) => //...
With uploadFile() and uploadMultipleFiles(), nothing will happen when the user is selecting nothing, close the file selection, and
cancel the upload.
If you want the upload promise to reject in such case, please use: uploadFileOrReject() or uploadMultipleFilesOrReject() instead.
The signature of compressFile() is:
compressFile(image, orientation, ratio, quality, maxWidth, maxHeight)
| Parameter | Type | Description |
|---|---|---|
| image | string | DataUrl (string) representing the image |
| orientation | number | EXIF Orientation value using the DOC_ORIENTATION enum value |
| ratio | number | Maximum scale factor as a percentage (optional, default: 50) 1 |
| quality | number | JPEG quality factor as a percentage (optional, default: 50) 2 |
| maxWidth | number | Maximum width in pixels if you need to resize (optional, default: 0 - no resize) |
| maxHeight | number | Maximum height in pixels if you need to resize (optional, default: 0 - no resize) |
[1] Ratio: "50" will decrease the resolution of each dimension by 2, i.e.: image of 2000 X 1500 pixels will become 1000 X 750 pixels, while the whole resolution will be reduced by 4.
[2] Quality: For more info about this parameter, read this guide
We will use Renderer2, and transform the image using HTML canvas encrustation. In fact you can use the static version in the library and import renderer by yourself, or replace it with another DOM abstraction, using RendererFactory2.
There are mainly two advantage for using Renderer2 abstraction over direct DOM manipulation (by using ElementRef or window.document
directly).
That's being said, please note that because of some iOS limitations/bugs when using Renderer2, we still are using window.document API, for
the upload part only (not the canvas itself).
uploadFileOrReject and
uploadMultipleFileOrReject)uploadFile or uploadMultiple.
With these, the promise stays silent when the user cancel the upload selection.index.ts before submitting it again to npm, in
order to make it more handy.FAQs
Angular utility for compressing images to a satisfying size, that you can choose
We found that ngx-image-compress demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.