Angular 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
Cropper component
cropper.component.ts
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); } }
Component state
app.component.ts
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); }; }
Component template
cropper.component.html
<div #crop></div>
Importing the component
app.module.ts
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 {}
Component usage
app.component.html
<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"]