Image-Cropper In angular

The Code Points August 21, 2022 0

In this article, we will learn how to image add image cropper, resizer and scaling component in Angular application. We will be use the ngx-image-cropper package and explore its configuration and customization properties.

Why use Cropper, Resizer, Scaling feature require for Images?

Sometimes, users are requested to upload images of some specific dimensions. In that case, it becomes a very difficult task for a user to edit images to crop, resize them in any external application and then upload. To make this expeditious, we can integrate the image cropper, resized feature in our own Angular application.

So let's start with implementation part,

First, we need to create a new angular application for demo using following command into the terminal.

ng new Image-Cropper-Example

We are installing for bootstrap framework for responsive design if you already use any framework then skip this step.

Use following command to install the bootstrap framework into the application.

npm install bootstrap

Now, install the ngx-image-cropper npm package using following command.

npm install ngx-image-cropper

Now, import the ImageCropperModule into the 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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ImageCropperModule } from 'ngx-image-cropper';


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

Now, add the following code into the app.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.css']
})
export class AppComponent {
imageChange: any = '';
cropImagePreview: any = '';
    onFileChangeEvent(event: any): void {
        this.imageChange = event;
    }
    cropImage(e: ImageCroppedEvent) {
        this.cropImagePreview = e.base64;
    }
}

Now, Add the image-cropper tool(component)  into the app.component.html file using following code.

<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)="onFileChangeEvent($event)" />
  </div>
  <div class="col-md-8">
    <image-cropper 
      [imageChangedEvent]="imageChange" 
      [maintainAspectRatio]="true" 
      [aspectRatio]="4 / 4"
      [resizeToWidth]="300" 
      format="png" 
      (imageCropped)="cropImage($event)" 
      >
    </image-cropper>
  </div>
  <div class="col-md-4">
    <h6>Demonstration Image</h6>
    <img [src]="cropImagePreview" />
  </div>
</div>

Now run the application using ng server command into the terminal and browse the image we are able to perform the Crop, Resize and Scaling on image.

Conclusion

In this article, we learned how to implement image Crop, Resize and Scaling operation in angular application using ngx-image-cropper with demonstrate application.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.