Angular 13 Crop Image Before Upload With Preview

Websolutionstuff | May-10-2022 | Categories : Angular

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

 

 

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

 

 

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

 

 

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 :

Recommended Post
Featured Post
How To Image Upload With Progress Bar Angular 15
How To Image Upload With Progr...

As an Angular 15 developer, I understand the importance of incorporating image upload functionality with a progress bar...

Read More

Jun-21-2023

How To Add Ckeditor In Laravel
How To Add Ckeditor In Laravel

In this article, I will explain you how to add ckeditor in laravel, CKEditor is a WYSIWYG rich text edito...

Read More

Jun-18-2020

How to Create Trait in Laravel 10 Example
How to Create Trait in Laravel...

Hello developers! 👋 Today, let's dive into the wonderful world of Laravel 10 and explore one of its handy featu...

Read More

Feb-09-2024

Laravel 9 Form Validation Example
Laravel 9 Form Validation Exam...

 In this tutorial, we will see laravel 9 form validation example. For any incoming data, we need to validate i...

Read More

Feb-12-2022