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.

 

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

 

 

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"
    ],
...
...

 

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

 

 

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

 

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

 

 

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>

 

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