Angular Image Upload with Crop and Zooming step by step

implementing image upload with crop and zooming in Angular involves a few steps. We’ll use the popular library called ng2-img-cropper for this purpose. Here’s a step-by-step guide:

Note: If you went to create a new Angular project you can see my another blog ‘How to create Angular project’, also you can follow below steps

Step 1: Install ng2-img-cropper

Open a terminal and run the following command to install ‘ng2-img-cropper’:

npm install ng2-img-cropper --save

Step 2: Import and Configure Module

In your Angular module file (usually ‘app.module.ts’), import ‘ImageCropperModule’ from ‘ng2-img-cropper’:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ImageCropperModule } from 'ng2-img-cropper';

import { AppComponent } from './app.component';

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

Step 3: Create Component

Create an Angular component that will handle the image upload and cropping. Here’s a basic example:

// image-upload.component.ts
import { Component, OnInit } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent implements OnInit {
  imageChangedEvent: any = '';
  croppedImage: any = '';

  constructor() { }

  ngOnInit(): void {
  }

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
  }

  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
  }

  imageLoaded() {
    // Image loaded callback
  }

  cropperReady() {
    // Cropper ready callback
  }

  loadImageFailed() {
    // Image load failed callback
  }

}

Step 4: Create HTML Template

Create the HTML template for your component (‘image-upload.component.html’):

Step 5: Style the Component

You may want to add some styles to your component (‘image-upload.component.css’):

/* image-upload.component.css */
input {
  margin-bottom: 20px;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}

Step 6: Use the Component

Now, you can use your newly created ‘ImageUploadComponent’ in your existing Angular application. For example, you can add it to the main app component:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Step 7: Run Your Application

Run your Angular application using the following command:

ng serve

Visit ‘http://localhost:4200/’ in your browser, and you should see your image upload component with crop and zoom functionality.

That’s it! You’ve successfully implemented image upload with crop and zoom in Angular using ‘ng2-img-cropper’. Customize the component and styles as needed for your project.