Angular 17|16 Image Cropper Example

ngx-image-cropper allows users to upload images, preview them, crop the selected area, and apply zoom functionality in Angular 17, 16.

Simply install and set up ngx-image-cropper and import it in your typescript file, then use it on views template to crop, resize, scale, preview, and upload images in angular 17, 16 projects.

Angular Image Crop, Resize, Preview, and Upload Example

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

Step 1 – Setup Angular Project

If Angular project is not setup in your system, then open your cmd and run ng new image-upload-example, it will install and create a new Angular project using the Angular CLI:

ng new image-upload-example --no-standalone
cd image-upload-example

Step 2 – Install Bootstrap and Cropper JS Module

Once you have created a new Angular project, now you need to install the bootstrap library and the ngx-image-cropper JS module, you can do this using the following command:

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

Navigate to the src/app folder and open app.module.ts file, then import image cropper module into it; like following:

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 – Use Image Crop, Upload and Preview in Template

To create image resize, crop, preview and upload form in angular projects, Simply navigate 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</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 – Import and use Cropper in App Component ts

Navigate to the src/app directory and open app.component.ts, then use the cropper image function to crop, resize, zoom the image before uploading; like following:

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 ng serve 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 created an image upload, preview, crop, and zoom functionality in an Angular 17, 16 application using the ngx-image-cropper library.

Recommended Angular Tutorials