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 |

Installation

Install the package and croppie with yarn:

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

or with npm:

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

Usage

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxSuperCroppieModule } from 'ngx-super-croppie';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSuperCroppieModule],
  providers: [NgxSuperCroppieModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

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

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

import { Component, OnInit, ViewChild } from '@angular/core';
import { CroppieOptions, ResultOptions } from 'croppie';
import { NgxSuperCroppieComponent } from 'ngx-super-croppie';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  @ViewChild('ngxSuperCroppie')
  ngxSuperCroppie: NgxSuperCroppieComponent;

  public croppieOptions: CroppieOptions = {
    boundary: { width: 220, height: 220 },
    customClass: 'my-class',
    enableExif: true,
    enableOrientation: true,
    enableZoom: true,
    enforceBoundary: true,
    enableResize: false,
    maxZoom: 1,
    minZoom: 0,
    mouseWheelZoom: true,
    showZoomer: true,
    viewport: { width: 200, height: 200, type: 'circle' },
  };

  public url: string | ArrayBuffer;

  public points: number[] = [0, 0, 200, 200];

  public orientation = 1;

  public zoom = 0;

  public resultOptions: ResultOptions = {
    type: 'base64',
    size: 'viewport',
    format: 'jpeg',
    quality: 1,
    circle: false,
  };

  public croppedImage: string | HTMLElement | Blob | HTMLCanvasElement;

  ngOnInit(): void {
    this.url = null;
  }

  public updateCroppedImage(
    crop: string | HTMLElement | Blob | HTMLCanvasElement,
  ): void {
    this.croppedImage = crop;
  }

  public handleFileInput(files: FileList): void {
    if (files.length !== 1) {
      return;
    }

    const file = files[0];

    const fileReader = new FileReader();
    fileReader.onloadend = () => {
      this.url = fileReader.result;
    };

    fileReader.readAsDataURL(file);
  }

  public get(): void {
    const data = this.ngxSuperCroppie.get();
    console.log(data);
  }

  public destroy(): void {
    this.ngxSuperCroppie.destroy();
  }

  public rotate(): void {
    this.ngxSuperCroppie.rotate(90);
  }

  public setZoom(): void {
    this.ngxSuperCroppie.setZoom(0.3);
  }
}

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

<h1>NgxSuperCroppie Demo</h1>

Select image:
<input type="file" (change)="handleFileInput($event.target.files)" /><br />
<button type="button" (click)="get()">Get</button>
<button type="button" (click)="destroy()">Destroy</button>
<button type="button" (click)="rotate()">Rotate 90°</button>
<button type="button" (click)="setZoom()">Zoom 0.3</button>

<ngx-super-croppie
  *ngIf="url"
  #ngxSuperCroppie
  [croppieOptions]="croppieOptions"
  [url]="url"
  [points]="points"
  [orientation]="orientation"
  [zoom]="zoom"
  [resultOptions]="resultOptions"
  (result)="updateCroppedImage($event)"
></ngx-super-croppie>

<img
  *ngIf="croppedImage"
  [src]="croppedImage"
  alt="cropped image"
  accept="image/gif, image/jpeg, image/jpg, image/png"
  style="border: 2px solid grey"
/>

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 [email protected]:lukaskupczyk/ngx-super-croppie.git

2. Install the necessary dependencies: yarn or npm install

3. Serve angular: yarn start or npm run start

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

Development

To build the module use yarn build:package

Credit

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