Angular cropper

A new version of the jSuites JavaScript Cropper plugin is available here.

JavaScript Image Cropper

• JavaScript Cropper

Angular cropper working example on codesandbox.

Installation

to install the component you must have npm. Navigate to the root of your project, and enter the command below

npm i @jsuites/cropper

Image cropper

Component

import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
import "jsuites/dist/jsuites.layout.css";

@Component({
    selector: "app-cropper",
    templateUrl: "./cropper.component.html",
    styleUrls: ["./cropper.component.css"]
})

export class CropperComponent implements AfterViewInit {
    @Input()
    properties: Object;
    @ViewChild("crop") crop: ElementRef;
    ngAfterViewInit() {
        cropper(this.crop.nativeElement, this.properties);
    }
} 

State

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    imageUrl = "";

    setImage = (newValue) => {
        this.imageUrl = newValue;
    };

    handleCropperChange = (el, imageElement) => {
        this.setImage(imageElement.src);
    };
}    

Template

<div #crop></div>

Importing the component

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

import { AppComponent } from "./app.component";
import { CropperComponent } from "./cropper/cropper.component";

@NgModule({
    declarations: [AppComponent, CropperComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

Using the component

<h3>Angular cropper example</h3>
<app-cropper
    [properties]="{
    value: imageUrl,
    onchange: handleCropperChange,
    area: [300, 300],
    crop: [100, 100]
}"
></app-cropper>
<span> Selected image base64: {{ imageUrl }}</span>

NOTE: Make sure to import the cropper.js and cropper.css in your angular.json or angular-cli.json

"styles": ["styles.css", "node_modules/@jsuites/cropper/cropper.css"], "scripts": ["node_modules/@jsuites/cropper/cropper.js"]