Angular 13 Crop Image Before Upload With Preview

In this article, we will see the angular 13 crop image before uploading with a preview. we will give you a simple example of an angular 12/13 image cropper example. For image cropping, we are using the ngx-image-cropper npm package. it will provide you Cropping, Zooming, Scaling, and Preview functionality while uploading time.

we will explain how to upload an angular image, show an image preview by creating a Base64 URL in angular, how to crop an image in angular, how to zoom the image, and how to scale the image in Angular.

So, let’s see angular resize an image before upload, crop image before uploading with preview in angular 13, image crop and upload in angular 13 with preview, angular 13 image crop, and upload.

To know more about the image cropper, visit here.

Step 1: Set Up Angular 12/13 Environment

Step 2: Install Bootstrap Package

Step 3: Add NGX Image Cropper Package

Step 4: Register ImageCropperModule in App Module

Step 5: Integrate Image Cropper in Angular 12/13

Step 6: Update HTML File

Step 7: Start Development Server

Step 1: Set Up Angular 12/13 Environment

In this step, we will install angular using CLI.

npm install -g @angular/cli
ng new ng-crop-img-app
cd ng-crop-img-app

Read Also: How To Install Angular In Ubuntu

Step 2: Install Bootstrap Package

To use the custom UI components, we require to install the Bootstrap package in the Angular app.

npm install bootstrap

Include Bootstrap CSS into the angular.json file:

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

Step 3: Add NGX Image Cropper Package

In this step, we will install the ngx-image-cropper npm package for uploading the image crop function in angular.

npm install ngx-image-cropper --save

Read Also: How To Run Python Script In Laravel 9

Step 4: Register ImageCropperModule in App Module

Now, we will import ImageCropperModule ngx-image-cropper. So, let's update the app.module.ts file as below.

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

Step 5: Integrate Image Cropper in Angular 12/13

In this step, we will update app.component.ts. In this file we will write fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that provided by ngx-image-cropper.

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.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
    }
}

Read Also: Laravel 9 Socialite Login with Facebook Account

Step 6: Update HTML File

Now, we will update the HTML file as below.

<div class="container">
    <div class="card">
      <div class="card-header">
          Angular 13 Crop Image Before Upload With Preview - Websolutionstuff
      </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>

Step 7: Start Development Server

In this step, we will run the server.

ng serve

Open the URL on the browser:

http://localhost:4200

You might also like :

• Read Also: Laravel 9 Group By Query Example
• Read Also: Laravel 9 CRUD Operation Example
• Read Also: Laravel 9 REST API With Passport Authentication
• Read Also: Laravel 9 User Roles and Permissions Without Package