Angular 13 Image Upload with Crop, Zoom, Scale, Preview Tutorial

Angular 13 image crop, zoom, scale, preview and upload; Through this tutorial, i am going to show you how to upload and crop, zoom, scale, preview image in angular 13 apps.

Angular 13 Image Upload with Crop, Zoom, Scale, Preview Tutorial

Follow the below given steps to image upload and crop, zoom in angular 13 apps; as follows:

  • Step 1 – Create New Angular App
  • Step 2 – Install Bootstrap and Cropper JS Library
  • Step 3 – Import Dependencies in Module.ts File
  • Step 4 – Create Image Crop Form in View File
  • Step 5 – Add Code On app.Component ts File
  • Step 6 – Start the Angular App

Step 1 – Create New Angular App

Run the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Bootstrap and Cropper JS Library

Then run the following command on terminal to install bootstrap library for implement image crop and upload in angular app; as follows:

 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 – Import Dependencies in Module.ts File

Go to 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 – Create Image Crop Form in View File

Go to 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 - Laratutorials</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

Go to 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

Run the following command on terminal to start angular apps:

ng serve

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *