Image

Angular Crop Image Before Upload with Preview : In this article, we will talk about Angular crop picture before upload to the application . This post will give you straightforward illustration of Angular cropper model. you’ll learn picture upload with crop in Angular. This article goes in nitty gritty on Angular  picture upload with crop utilizing cropper.

In the event that you need to utilize picture transfer with crop, you can undoubtedly utilize ngx-image-cropper npm package. it will give you Cropping, Zooming, Scaling, and Preview usefulness while uploading time. it’s effectively use with your Angular.

In this model, I will give you bit by bit clarification how you can upload transfer in crop in Angular application.

Step 1: Create New App : 

Create Angular app using the following command :

ng new ngPicCrop

Step 2: Install Npm Packages : 

In this progression, we will introduce ngx-image-cropper npm package for upload picture crop work in precise.

npm install ngx-image-cropper --save

Step 3: Import ImageCropperModule

Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let’s update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
  
import { ImageCropperModule } from 'ngx-image-cropper';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageCropperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Step 4: Update Component ts File : 

Here, we will refresh app.component.ts document here, in this record we will compose fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that gave by ngx-image-cropper.

You can refresh as howl app.component.ts document.

src/app/app.component.ts

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngImageCrop';
  
  imageChangedEvent: any = '';
    croppedImage: any = '';
  
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded() {
        /* show cropper */
    }
    cropperReady() {
        /* cropper ready */
    }
    loadImageFailed() {
        /* show message */
    }

Step 5: Update HTML File : 

<div class="container">
    <div class="card">
      <div class="card-header">
          Angular Crop Image Tutorial Example - ItSolutionStuff.com
      </div>
      <div class="card-body">
        <input type="file" (change)="fileChangeEvent($event)" />
        <div class="row" style="margin-top: 15px;">
            <div class="text-center col-md-8">
                <h5>Crop Image</h5>
                <image-cropper 
                [imageChangedEvent]="imageChangedEvent" 
                [maintainAspectRatio]="true" 
                [aspectRatio]="4 / 4"
                [resizeToWidth]="256" 
                format="png" 
                (imageCropped)="imageCropped($event)" 
                (imageLoaded)="imageLoaded()"
                (cropperReady)="cropperReady()" 
                (loadImageFailed)="loadImageFailed()"></image-cropper>
            </div>
            <div class="text-center col-md-4">
                <h5>Preview</h5>
                <img [src]="croppedImage" />
            </div>
        </div>
      </div>
    </div>
</div>

Now you run your Angular app by following command :

ng serve

 

Output :