npmpackage.info

Gathering detailed insights and metrics for angular-cropperjs

Other packages similar to angular-cropperjs

cropperjs

1.6.2

JavaScript image cropper.

vue-cropperjs

5.0.0

A Vue wrapper component for cropperjs

react-cropper

2.3.3

Cropper as React Component

@types/vue-cropperjs

4.1.6

TypeScript definitions for vue-cropperjs

Gathering detailed insights and metrics for angular-cropperjs

angular-cropperjs

CropperJS integration for Angular +6

14.0.1

109

MIT

TypeScript

2.92 kB

1,133,445 1.7

Installations

npm install angular-cropperjs

Pull Requests

Open

3

Total

27

Closed

20

Merged

4

Issues

Open

29

Total

64

Closed

35

Releases

Unable to fetch releases

Developer

matheusdavidson

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

16.20.0

NPM Version

8.19.4 Statistics

109 Stars

62 Commits

68 Forks

7 Watching

6 Branches

5 Contributors

Updated on 24 Aug 2024

Bundle Size

13.21 kB

Minified

2.92 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (56.57%)

CSS (20.26%)

HTML (11.87%)

JavaScript (8.66%)

Shell (2.63%)

Total Downloads

Cumulative downloads

Total Downloads

1,133,445

Last day

-5.6%

1,281

Compared to previous day

Last week

4.6%

6,331

Compared to previous week

Last month

23.6%

26,336

Compared to previous month

Last year

26.6%

258,854

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/common @angular/core cropperjs

Versions

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

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

CII-Best-Practices

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

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 2024-11-18

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