Angular 16 Image Cropper Example

ngx-image-cropper allows users to upload images, preview them, crop the selected area, and apply zoom functionality. So, Through this tutorial, you will learn how to crop, resize, scale, preview and upload image in angular 16projects.

Angular 16 Image Crop, Resize, Preview and Upload Example

Steps to image crop, resize, preview and upload in angular 16 projects using ngx-image-cropper:

• Step 1 – Setup Angular Project
• Step 2 – Install Bootstrap and Cropper JS Library
• Step 3 – Import ImageCropperModule
• Step 4 – Implement Image Crop, Upload and Preview
• Step 5 – Add Code On app.Component ts File
• Step 6 – Start the Angular App

Step 1 – Setup Angular Project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular project using the Angular CLI:

ng new image-upload-example
cd image-upload-example

Step 2 – Install Bootstrap and Cropper JS Library

Once you have created new angular project. Now you need to install bootstrap library and ngx-image-cropper js library.

So open your cmd and execute the following commands into it to install bootstrap library and ngx-image-cropper js library in your angular projects:

npm install bootstrap
npm install ngx-image-cropper --save

Then Include bootstrap css into angular.json file:

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

Step 3 – Import ImageCropperModule

Next, you need to import image cropper module in app.module.ts file.

So, 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 – Implement Image Crop, Upload and Preview

Next, you need to create image resize, crop, preview and upload form in angular projects. 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 16 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

Next, you need to 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

Finally, execute the following command on cmd to start angular projects:

ng serve

Visit http://localhost:4200 in your web browser, and you should see the image upload functionality with preview, crop, and zoom features.

Conclusion

Congratulations! You have successfully implemented an image upload, preview, crop, and zoom functionality in an Angular 16 application using the ngx-image-cropper library. Users can now upload images, preview them, crop specific areas, and zoom in or out to get the desired result.

Recommended Angular Tutorials