Welcome folks today in this blog post we will be uploading images
in angular 14 with live preview
and we will be resizing
,cropping and scaling
images in browser using ngx-image-cropper
library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
app using the below command as shown below
ng new sampleapp
And after that you need to install the below libraries
using the below command as shown below
npm i ngx-image-cropper
And after that you will see the below directory
structure of the angular app as shown below
Now first of all you need to go to app.module.ts
file and copy paste the below code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { ImageCropperModule } from 'ngx-image-cropper'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, ImageCropperModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } |
And now you need to go to app.component.html
file and copy paste the below html
code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<input type="file" (change)="fileChangeEvent($event)" /> <image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" ></image-cropper> <img [src]="croppedImage" /> |
As you can see in the above html code we have the input
field where we allow the user to select
the image and then we have attached the onChange
event listener when the file is changed. And then we have the actual image-cropper
widget to actually show the live preview
of the selected image and inside it we have different attributes
to resize,crop and scale
image at the same time and live preview will be seen by the user instantly and you can download
the image.
And now we need to go to app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import { Component } from '@angular/core'; import { ImageCroppedEvent } from 'ngx-image-cropper'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; imageChangedEvent: any = ''; croppedImage: any = ''; fileChangeEvent(event: any): void { this.imageChangedEvent = event; } imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; } imageLoaded() { // show cropper } cropperReady() { // cropper ready } loadImageFailed() { // show message } } |
As you can see we have different methods
for various operations that are listed above. And then we are also getting the base64
code of the selected image.