Angular Image Upload with Crop, Zoom, Scale

In this step, we are going to learn about uploading images with zoom, crop, and scale. We will use Angular to do this. If we want to download the cropped image, we can download it in base64. We can use various versions of Angular applications like Angular 6, 7, 8, 9, 10, and 11.

The npm package of ngx-image-cropper will be useful when we want to use image upload with the crop. It will give us the functionalities like scaling, cropping, zooming, and preview at the time of loading. We can very easily use it in our Angular application. In order to upload an image with the crop, the step by step is described as follows:

Step 1:

In this step, we are going to Create New App. The following command will be useful to create our new angular application like this:

Step 2:

In this step, we are going to Install Npm Package. In our Angular app, we can upload image crop functions by using the npm package of ngx-image-cropper.

Step 3:

In this step, we are going to Import ImageCropperModule. We will use ngx-image-cropper to import it. After that, we will use the declaration part to add it. Now we will use the file named app.module.ts and update it like this:

src/app/app.module.ts

Step 4:

In this step, we are going to Update Component ts File. This file is used to write imageLoaded(), fileChangeEvent(), loadImageFailed(), fileChangeEvent(), and cropperReady(). All these functions are given by ngx-image-cropper. Now we will open app.component.ts file and update it like this:

src/app/app.component.ts

Step 5:

In this step, we are going to Update HTML File. In this form, we will use the Bootstrap class. If we don't have Bootstrap, we can use the following link to install it in our system:

https://www.javatpoint.com/angular-7-with-bootstrap#:~:text=How%20to%20install%20Bootstrap%20for,%3E%20The%20%403%20is%20important!

Now we will open our HTML file and update it like this:

src/app/app.component.html

Now our above code is ready to run. In order to run the above code, we will use the following command:

When we run this command, the following output will be generated: