NgxSuperCroppie

NgxSuperCroppie is a simple angular8+ wrapper for croppie.

Version

The version numbers are in line with major Angular versions:

Angular Version	ngx-super-croppie Version
10.x.x	10.x.x
11.x.x	11.x.x
12.x.x	12.x.x
13.x.x	13.x.x
14.x.x	14.x.x
15.x.x	15.x.x
16.x.x	16.x.x
17.x.x	17.x.x
18.x.x	18.x.x
19.x.x	19.x.x

Installation

Install the package and croppie with yarn:

1yarn add ngx-super-croppie croppie @types/croppie

or with pnpm:

1pnpm add ngx-super-croppie croppie @types/croppie

or with npm:

1npm install ngx-super-croppie croppie @types/croppie

Usage

1. Import ngx-super-croppie in your src/app/app.module.ts

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5import { NgxSuperCroppieModule } from 'ngx-super-croppie';
6
7@NgModule({
8  declarations: [AppComponent],
9  imports: [BrowserModule, NgxSuperCroppieModule],
10  providers: [NgxSuperCroppieModule],
11  bootstrap: [AppComponent],
12})
13export class AppModule {}

2. Import the croppie styles in your src/styles.scss

1/* You can add global styles to this file, and also import other style files */
2@import '~croppie/croppie.css';

3. Configure ngx-super-croppie in your component.ts

1import { Component, OnInit, ViewChild } from '@angular/core';
2import { CroppieOptions, ResultOptions } from 'croppie';
3import { NgxSuperCroppieComponent } from 'ngx-super-croppie';
4
5@Component({
6  selector: 'app-root',
7  templateUrl: './app.component.html',
8  styleUrls: ['./app.component.css'],
9})
10export class AppComponent implements OnInit {
11  @ViewChild('ngxSuperCroppie')
12  ngxSuperCroppie: NgxSuperCroppieComponent;
13
14  public croppieOptions: CroppieOptions = {
15    boundary: { width: 220, height: 220 },
16    customClass: 'my-class',
17    enableExif: true,
18    enableOrientation: true,
19    enableZoom: true,
20    enforceBoundary: true,
21    enableResize: false,
22    maxZoom: 1,
23    minZoom: 0,
24    mouseWheelZoom: true,
25    showZoomer: true,
26    viewport: { width: 200, height: 200, type: 'circle' },
27  };
28
29  public url: string | ArrayBuffer;
30
31  public points: number[] = [0, 0, 200, 200];
32
33  public orientation = 1;
34
35  public zoom = 0;
36
37  public resultOptions: ResultOptions = {
38    type: 'base64',
39    size: 'viewport',
40    format: 'jpeg',
41    quality: 1,
42    circle: false,
43  };
44
45  public croppedImage: string | HTMLElement | Blob | HTMLCanvasElement;
46
47  ngOnInit(): void {
48    this.url = null;
49  }
50
51  public updateCroppedImage(
52    crop: string | HTMLElement | Blob | HTMLCanvasElement,
53  ): void {
54    this.croppedImage = crop;
55  }
56
57  public handleFileInput(files: FileList): void {
58    if (files.length !== 1) {
59      return;
60    }
61
62    const file = files[0];
63
64    const fileReader = new FileReader();
65    fileReader.onloadend = () => {
66      this.url = fileReader.result;
67    };
68
69    fileReader.readAsDataURL(file);
70  }
71
72  public get(): void {
73    const data = this.ngxSuperCroppie.get();
74    console.log(data);
75  }
76
77  public destroy(): void {
78    this.ngxSuperCroppie.destroy();
79  }
80
81  public rotate(): void {
82    this.ngxSuperCroppie.rotate(90);
83  }
84
85  public setZoom(): void {
86    this.ngxSuperCroppie.setZoom(0.3);
87  }
88}

4. Add ngx-super-croppie to your component.html

1<h1>NgxSuperCroppie Demo</h1>
2
3Select image:
4<input type="file" (change)="handleFileInput($event.target.files)" /><br />
5<button type="button" (click)="get()">Get</button>
6<button type="button" (click)="destroy()">Destroy</button>
7<button type="button" (click)="rotate()">Rotate 90°</button>
8<button type="button" (click)="setZoom()">Zoom 0.3</button>
9
10<ngx-super-croppie
11  *ngIf="url"
12  #ngxSuperCroppie
13  [croppieOptions]="croppieOptions"
14  [url]="url"
15  [points]="points"
16  [orientation]="orientation"
17  [zoom]="zoom"
18  [resultOptions]="resultOptions"
19  (result)="updateCroppedImage($event)"
20></ngx-super-croppie>
21
22<img
23  *ngIf="croppedImage"
24  [src]="croppedImage"
25  alt="cropped image"
26  accept="image/gif, image/jpeg, image/jpg, image/png"
27  style="border: 2px solid grey"
28/>

Example

You can find a full example under src/app/app.component.ts in this repository. To run the example, follow these steps:

1. Clone the repository: git clone git@github.com:lukaskupczyk/ngx-super-croppie.git

2. Install the necessary dependencies: pnpm install or npm install

3. Serve angular: pnpm start or npm run start

4. Open the app in your browser: http://localhost:4200

Development

To build the module use pnpm build:package

Credit

ngx-super-croppie is inspired by the (unfortunately) unmaintained ngx-croppie package.