npmpackage.info

@picturelink/ngx-image-compress

Angular library for uploading and compressing images

8.0.4-beta.0

MIT

TypeScript

1.57 kB

675 3.5

Installations

npm install @picturelink/ngx-image-compress

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.2.0

NPM Version

6.14.4 Pull Requests

Open

0

Total

52

Closed

25

Merged

27

Issues

Open

4

Total

62

Closed

58

Releases

18.1.3

Published on 22 Jul 2024

18.1.2

Published on 22 Jul 2024

15.1.6

Published on 25 Jun 2023

15.1.5

Published on 08 May 2023

13.1.16

Published on 22 Feb 2023

13.1.15

Published on 14 Feb 2023

View all 15 releases

Contributors

Unable to fetch Contributors

View all 11 contributors

Languages

TypeScript

HTML

JavaScript

SCSS

TypeScript (85.75%)

HTML (12.07%)

JavaScript (1.3%)

SCSS (0.88%)

Developer

dfa1234

Download Statistics

Total Downloads

675

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

88 Stars

284 Commits

36 Forks

3 Watching

5 Branches

11 Contributors

Bundle Size

3.75 kB

Minified

1.57 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

8.0.4-beta.0

Package Id

@picturelink/ngx-image-compress@8.0.4-beta.0

Unpacked Size

203.60 kB

Size

27.84 kB

File Count

NPM Version

6.14.4

Node Version

14.2.0

Total Downloads

Cumulative downloads

Total Downloads

675

Last day

Compared to previous day

Last week

-50%

Compared to previous week

Last month

Compared to previous month

Last year

-71.3%

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/common @angular/core

Versions

ngx-image-compress

Angular utility for compressing images to a satisfying size, that you can choose

Import

1npm i ngx-image-compress

Usage

Example here: https://stackblitz.com/edit/ngx-compress-sample

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';
3
4
5@Component({
6  selector: 'app-root',
7  template: `
8    <div>
9      <button (click)="compressFile()">Upload and compress Image</button>
10      <img *ngIf="imgResultBeforeCompress" [src]="imgResultBeforeCompress" alt="">
11      <img *ngIf="imgResultAfterCompress" [src]="imgResultAfterCompress" alt="">
12    </div>
13  `
14})
15export class AppComponent {
16
17  constructor(private imageCompress: NgxImageCompressService) {}
18  
19  imgResultBeforeCompress:string;
20  imgResultAfterCompress:string;
21
22  compressFile() {
23  
24    this.imageCompress.uploadFile().then(({image, orientation}) => {
25    
26      this.imgResultBeforeCompress = image;
27      console.warn('Size in bytes was:', this.imageCompress.byteCount(image));
28      
29      this.imageCompress.compressFile(image, orientation, 50, 50).then(
30        result => {
31          this.imgResultAfterCompress = result;
32          console.warn('Size in bytes is now:', this.imageCompress.byteCount(result));
33        }
34      );
35      
36    });
37    
38  }
39}

How it's working underwood?

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.

Updates

2019/07/01

Update to Angular 8 (angular 7 is enough)
Fix DOC_ORIENTATION import (not a required import)

2019/01/09

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)

2018/10/04

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.

2017/12/06

Upload to Github Need some fixes and tests to be use as a static library

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 4

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-merge.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/on-merge.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-merge.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/on-merge.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-merge.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/on-merge.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull-request.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/on-pull-request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull-request.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/on-pull-request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-on-npm-view-engine.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm-view-engine.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-on-npm-view-engine.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm-view-engine.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-on-npm-view-engine.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm-view-engine.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-on-npm.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-on-npm.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-on-npm.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-on-npm.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/dfa1234/ngx-image-compress/publish-on-npm.yml/master?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 4 out of 4 npmCommand dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.5

/10

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