Angular 12 Image Crop and Upload Example

Angular 12 image crop and upload example. In this tutorial, you will learn how to upload an angular image, show image preview by creating a Base64 url in angular, how to crop an image in angular, how to zoom the image, and how to scale the image in Angular.

Angular 12 Image Upload, Preview, Crop, Zoom and Scale Example

Follow the following steps and image upload and crop, zoom in angular 12 app:

• Step 1 – Create New Angular App
• Step 2 – Install Bootstrap Library
• Step 3 – Add Code on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On app.Component ts File
• Step 6 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Bootstrap Library

Then install bootstrap library for implement image crop and upload in angular app. So, You can install the packages by executing the following commands on the terminal:

 npm install bootstrap

Include bootstrap css into angular.json file:

...
...
    "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
...
...

Once you created a new angular app and entered into the project further, you have to install and add the image cropper plugin into the angular app:

npm install ngx-image-cropper

Step 3 – Add Code on App.Module.ts File

In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


import { ImageCropperModule } from 'ngx-image-cropper';


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

export class AppModule { }

Step 4 – Add Code on View File

In this step, create image upload form in angular 11 app. So, visit src/app/ and app.component.html and update the following code into it:

<div class="container mt-5 text-center">

  <h3 class="mb-5">Angular Image Crop Example</h3>

  <div class="col-md-12">
    <input type="file" (change)="onFileChange($event)" />
  </div>

  <div class="col-md-8">
    <image-cropper 
      [imageChangedEvent]="imgChangeEvt" 
      [maintainAspectRatio]="true" 
      [aspectRatio]="4 / 4"
      [resizeToWidth]="256" 
      format="png" 
      (imageCropped)="cropImg($event)" 
      (imageLoaded)="imgLoad()"
      (cropperReady)="initCropper()" 
      (loadImageFailed)="imgFailed()">
    </image-cropper>
  </div>

  <div class="col-md-4">
    <h6>Image Preview</h6>
    <img [src]="cropImgPreview" />
  </div>

</div>

Step 5 – Add Code On app.Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

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

export class AppComponent {

    imgChangeEvt: any = '';
    cropImgPreview: any = '';

    onFileChange(event: any): void {
        this.imgChangeEvt = event;
    }
    cropImg(e: ImageCroppedEvent) {
        this.cropImgPreview = e.base64;
    }

    imgLoad() {
        // display cropper tool
    }

    initCropper() {
        // init cropper
    }
    
    imgFailed() {
        // error msg
    }
}

Step 6 – Start the Angular App

In this step, execute the following command on terminal to start angular fullcalendar npm app:

ng serve

Recommended Angular Posts