Angular Image Upload & Cropper with Preview
Hi friends, In this article we going to see Angular image upload & cropper with preview option. In the present world, Angular helps a lot over web technologies with the high performance of our web application or website. In your Angular website or app, if you like to upload & crop your profile or some other images here you have a solution to do that.
The imageBase64 converts the image and encodes the string which makes it easy to upload the JPG or PNG files to the server and saved as a live image. With this image cropping tool, you can resize the width or height also change cropper position, image quality, format, image URL and much more you can do with ngx-image-cropper
Get started and use the Angular CLI to create a new Angular app
Before starting image upload & cropper first need to install an Angular app. The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.
Note: In this article, we used Angular 9 also it supports all the versions. If you have any trouble with the versions use the comment box to ask the questions.
Steps for Angular image upload & cropper with preview
Now start installing image cropper by the following code.
|
1 |
npm install ngx-image-cropper --save |
Import image cropper in your App Module
Once the installation completed and now start importing the ImageCropperModule in your app.module.ts use like the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ImageCropperModule } from 'ngx-image-cropper'; //ImageCropperModule import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, ImageCropperModule //ImageCropperModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Image image upload, cropper, & preview
Add the input image upload, image cropper, and image preview in your app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<input type="file" (change)="fileChangeEvent($event)" /> <!-- Image Upload --> <image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" ></image-cropper> <!-- Image Cropper --> <img [src]="croppedImage" /> <!-- Image Preview --> <router-outlet></router-outlet> |
Step to import ImageCroppedEvent
Finally, you need to import the ImageCroppedEvent in your app.component.ts and do whatever changes you want, the following code has default variables and methods with the image cropper. If you like to change as per your requirements like image transform, interfaces, or inputs here you more options to do that with ngx-image-cropper.
|
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 |
import { Component } from '@angular/core'; import { ImageCroppedEvent } from 'ngx-image-cropper'; // ImageCroppedEvent @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { 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 } } |
Once completed all the above steps, now execute the code with the ng serve and see the output. Here below you have an example for the output how it looks like.
Output:
Conclusion:
I hope this article will help you to crop your images if you have any doubts about this, use the comment box to ask a question. If you like this article share it with your friends.
