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




Follow us
facebooklogo github instagram twitter