npmpackage.info

angular-cropperjs

CropperJS integration for Angular +6

14.0.1

109

MIT

TypeScript

2.92 kB

1,204,110 1.7

Installations

npm install angular-cropperjs

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

16.20.0

NPM Version

8.19.4 Score

81.6

Supply Chain

96.9

Quality

75.9

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

3

Total

27

Closed

20

Merged

4

Issues

Open

29

Total

64

Closed

35

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 5 Contributors

Languages

TypeScript

CSS

HTML

JavaScript

Shell

TypeScript (56.57%)

CSS (20.26%)

HTML (11.87%)

JavaScript (8.66%)

Shell (2.63%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

matheusdavidson

Download Statistics

Total Downloads

1,204,110

Last Day

1,420

Last Week

7,766

Last Month

30,473

Last Year

281,183

GitHub Statistics

MIT License

109 Stars

62 Commits

68 Forks

7 Watchers

6 Branches

5 Contributors

Updated on Aug 24, 2024

Bundle Size

13.21 kB

Minified

2.92 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

14.0.1

Package Id

angular-cropperjs@14.0.1

Unpacked Size

91.38 kB

Size

14.51 kB

File Count

NPM Version

8.19.4

Node Version

16.20.0

Published on

Jun 19, 2023

Total Downloads

Cumulative downloads

Total Downloads

1,204,110

Last Day

7.3%

1,420

Compared to previous day

Last Week

18.7%

7,766

Compared to previous week

Last Month

31.6%

30,473

Compared to previous month

Last Year

33.6%

281,183

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/common @angular/core cropperjs

angular-cropperjs

CropperJS integration for Angular

Demo

https://matheusdavidson.github.io/angular-cropperjs/

How to use

1- Install the library:

1$ npm install angular-cropperjs --save

2- Import and load AngularCropperjsModule in the module you want to use, for example AppModule:

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5
6//
7// Import angular-cropperjs
8import { AngularCropperjsModule } from 'angular-cropperjs';
9
10@NgModule({
11    declarations: [AppComponent],
12    imports: [
13        BrowserModule,
14
15        //
16        // Load angular-cropperjs
17        AngularCropperjsModule
18    ],
19    providers: [],
20    bootstrap: [AppComponent]
21})
22export class AppModule {}

3- Use the component in your template like this:

1<!-- You can now use angular-cropper component in app.component.html -->
2<angular-cropper [cropperOptions]="config" [imageUrl]="imageUrl"></angular-cropper>

Using CropperJS methods:

Use @ViewChild in your component to get the element:

In your app.component.html

1<angular-cropper #angularCropper ..></angular-cropper>

And in your app.component.ts

1
2//
3// Import CropperComponent
4import { CropperComponent } from 'angular-cropperjs';
5
6//
7// Get with @ViewChild
8@ViewChild('angularCropper') public angularCropper: CropperComponent;

Then just call the CropperJS method you want:

anywhere in your app.component.ts

1//
2// Lets try to zoom
3this.angularCropper.cropper.zoom(0.1);

Development

This project was generated with Angular CLI version 6.0.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

License

No vulnerabilities found.

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

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

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

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-02-10

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

Other packages similar to angular-cropperjs

@abp/cropperjs

9.0.5

ABP Framework is a complete open-source infrastructure to create modern web applications by following the best practices and conventions of software development. This package is a part of the [ABP Framework](https://abp.io) and contains client-side files.

@crawl/angular-cropperjs

2.0.0

CropperJS integration for Angular 10

2mundos-angular-cropperjs

0.1.5-2m.0.0

CropperJS integration for Angular 2/4

angular-cropperjs-wrapper

0.0.6