If you need to see example of angular 10 image upload with crop using cropper. you will learn angular 10 crop zoom scale. We will use preview and upload example. This article will give you simple example of angular 10 crop image before upload.
If you need to use image upload with crop then you can easily use ngx-image-cropper npm package. it will provide you Cropping, Zooming, Scaling, and Preview functionality while uploading time. it's very easily use with your angular 10 application.
In this example, i will give you step by step explanation how you can image upload in crop in angular 10 application. you can also see bellow screenshot for demo.
Preview:
Step 1: Create New App
You can easily create your angular app using bellow command:
ng new ngImageCrop
Step 2: Install Npm Packages
In this step, we will install ngx-image-cropper npm package for upload image crop function in angular. so let's run both command:
npm install ngx-image-cropper --save
Step 3: Import ImageCropperModule
Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let's update app.module.ts file as like bellow:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ImageCropperModule } from 'ngx-image-cropper';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ImageCropperModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Update Component ts File
Here, we will update app.component.ts file here, in this file we will write fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that provided by ngx-image-cropper.
You can update as bellow app.component.ts file.
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.css']
})
export class AppComponent {
title = 'ngImageCrop';
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 */
}
}
Step 5: Update HTML File
I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 10.
Here, we will update html file as like bellow, so update it as like bellow:
src/app/app.component.html
<div class="container">
<div class="card">
<div class="card-header">
Angular Crop Image Tutorial Example - HDTuto.com
</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>
Now you can run angular 10 app:
Run Angular App:
ng serve
I hope it can help you...
Do you like below Tutorials ?
- Laravel 5.6 - Collection could not be converted to int
- Laravel - How to generate secure https URL from route?
- Laravel - Vue JS File Upload Example
- How to get last 7 days data in Laravel?
- Laravel Validation required if other field empty example
- Laravel Eloquent - When Case Statement in Select Query Example
- Laravel 7.x and 6.x Passing Variable to Javascript Example
- How to pass PHP variables in JavaScript or jQuery?