Angular 14 image crop, zoom, scale, preview and upload; Through this tutorial, we learn how to crop, zoom, scale, preview and upload image in angular 14 apps
Angular 14 Image Crop, Zoom, Scale, Preview and Upload Example
Use the following steps and image upload and crop, zoom in angular 14 apps; as follows:
- Step 1 – Create New Angular App
- Step 2 – Install Bootstrap and Cropper JS Library
- Step 3 – Import Dependencies in Module.ts File
- Step 4 – Create Image Crop Form in View File
- Step 5 – Add Code On app.Component ts File
- Step 6 – Start the Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Bootstrap and Cropper JS Library
Then install bootstrap library for implement image crop and upload in angular app. So, You can install the packages by executing the following commands on the terminal:
npm install bootstrap
Include bootstrap css into angular.json file:
...
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...
...
Once you created a new angular app and entered into the project further, you have to install and add the image cropper plugin into the angular app:
npm install ngx-image-cropper
Step 3 – Import Dependencies in Module.ts File
In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:
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 – Create Image Crop Form in View File
In this step, create image resize crop scale preview and upload form in angular 14 apps. So, visit 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 – Add Code On app.Component ts File
In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
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
In this step, execute the following command on terminal to start angular apps:
ng serve
Recommended Angular Tutorials
