Gathering detailed insights and metrics for ngx-alldone-image-compress
Gathering detailed insights and metrics for ngx-alldone-image-compress
Gathering detailed insights and metrics for ngx-alldone-image-compress
Gathering detailed insights and metrics for ngx-alldone-image-compress
npm install ngx-alldone-image-compress
Typescript
Module System
Node Version
NPM Version
57.2
Supply Chain
92.3
Quality
74.8
Maintenance
50
Vulnerability
98.6
License
TypeScript (81.6%)
JavaScript (13.48%)
HTML (3.73%)
CSS (1.18%)
Total Downloads
4,520
Last Day
2
Last Week
4
Last Month
8
Last Year
72
19 Commits
1 Watching
1 Branches
1 Contributors
Latest Version
10.0.0
Package Id
ngx-alldone-image-compress@10.0.0
Unpacked Size
152.38 kB
Size
30.03 kB
File Count
23
NPM Version
6.7.0
Node Version
11.11.0
Cumulative downloads
Total Downloads
Last day
0%
2
Compared to previous day
Last week
300%
4
Compared to previous week
Last month
300%
8
Compared to previous month
Last year
-50%
72
Compared to previous year
1
2
Angular utility for compressing image to a satisfying size, that you choose
1npm i ngx-alldone-image-compress
Import it in your app module
1import {BrowserModule} from '@angular/platform-browser'; 2import {NgModule} from '@angular/core'; 3 4import {AppComponent} from './app.component'; 5import {NgxImageCompressService} from 'ngx-image-compress'; 6 7@NgModule({ 8 declarations: [AppComponent], 9 imports: [BrowserModule, 10 providers: [NgxImageCompressService], 11 bootstrap: [AppComponent] 12}) 13export class AppModule {}
Use it in your component
1import {Component} from '@angular/core'; 2import {NgxImageCompressService} from 'ngx-image-compress'; 3import {DOC_ORIENTATION} from 'ngx-image-compress/lib/image-compress'; 4 5 6@Component({ 7 selector: 'app-root', 8 templateUrl: './app.component.html', 9 styleUrls: ['./app.component.scss'] 10}) 11export class AppComponent { 12 13 constructor(private imageCompress: NgxImageCompressService) {} 14 15 imgResultBeforeCompress; 16 imgResultAfterCompress; 17 18 compressFile() { 19 this.imageCompress.uploadFile().then(({image, orientation}) => { 20 this.imgResultBeforeCompress = image; 21 console.warn('Size in bytes was:', this.imageCompress.byteCount(image)); 22 this.imageCompress.compressFile(image, orientation, 50, 50).then( 23 result => { 24 this.imgResultAfterCompress = result; 25 console.warn('Size in bytes is now:', this.imageCompress.byteCount(result)); 26 } 27 ); 28 }); 29 } 30}
We will use Renderer2, and transform the image multiple time through HTML canvas encrustation. In fact you can use the static version into the library and import renderer by yourself.
Since Angular 6 include its own packaging system, I no longer need my webpack config to build it. Everything is working in angular 7 without complaint now (test app is on github)
Adding Live example.
Everything is now working and tested but I will make some arrangement to the code in index.ts
before submitting it again to npm
, in order to make it more handy.
Upload to Github Need some fixes and tests to be use as a static library
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
Found 0/19 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
license file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
149 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More