
Research
Security News
Malicious PyPI Package Exploits Deezer API for Coordinated Music Piracy
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
ngx-img-max
Advanced tools
[](https://gitter.im/bergben/bergben?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Angular module to resize images down to a certain width and height or to reduce the quality to fit a certain maximal filesize - all in the browser.
This means, the huge image that the user may select will never even need to be uploaded to the server.
This module is supported by all major browsers recent versions (IE 10+).
Make sure to include the following polyfill for HtmlCanvasElement.toBlob()
: https://www.npmjs.com/package/blueimp-canvas-to-blob
$ npm install blueimp-canvas-to-blob --save
$ npm install ng2-img-max --save
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxImgMaxModule } from 'ngx-img-max'; // <-- import the module
import { MyComponent } from './my.component';
@NgModule({
imports: [BrowserModule,
NgxImgMaxModule // <-- include it in your app module
],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
import { NgxImgMaxService } from 'ngx-img-max';
[...]
constructor(private ngxImgMaxService: NgxImgMaxService) {
this.ngxImgMaxService.resize([someImage], 2000, 1000).subscribe((result)=>{
});
}
}
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.
Example code catch errors:
this.ngxImgMaxService.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
});
compress(files: File[], maxSizeInMB: number, ignoreAlpha: boolean = false, logExecutionTime: boolean = false): Observable<any>
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.
compressImage
Same as above just that it takes in only one file instead of a whole array of files.
resize(files: File[], maxWidth: number, maxHeight: number, logExecutionTime: boolean = false): Observable<any>
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 10.000: for example resize([myfile1,myfile2],2000,10000).subscribe([...]
resizeImage
Same as above just that it takes in only one file instead of a whole array of files.
getEXIFOrientedImage(image:HTMLImageElement): Promise<HTMLImageElement>
Method that returns an image respecting the EXIF orientation data.
Due to the lack of other algorithms that also reduce the filesize of an image by reducing the quality until it fits a certain limit, help to find the best possible algorithm to do so is much appreciated. The current algorithm can be found here: https://github.com/bergben/ng2-img-max/blob/master/src/img-max-size.service.ts.
Although the resizing functions do use web workers to do the heavy work, this is not possible for the compression methods. The reasons for this are that a web worker does not have access to the DOM and can therefor not create a new HtmlCanvasElement. Neither can it be passed as a parameter to the web worker, as a web worker can only receive serializable data, which only be the ImageData but that can only be turned into a 2DCanvasContext, not a HtmlCanvasElement itself without the DOM.
FAQs
[](https://gitter.im/bergben/bergben?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
We found that ngx-img-max demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.