Learn MVC Using Angular Image Crop8 min read

Introduction

This article demonstrates how to use MVC using Angular Image Crop and Bootstrap Filestyle in Visual Studio 2017.

Angular Image Crop

When you upload the image in Angular JS, this image crop directive helps to reduce the image size by using different area cutters.

Features

  • Fix width/height in crop areaD.
  • Fix crop area square/circle.
  • Fix type of image format.
  • Fix image quality.

With the following steps, you can use Angular Image Crop in Angular JS in MVC.

  • Create an MVC Project.
  • Configure Angular Image Crop and Bootstrap Filestyle.
  • Work in Angular Image Crop.

Create MVC Project

Open the visual studio 2017:

Angular

Go to New Menu >Click New and Project. Now it will open the New Project Window.

Angular

You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in the “Solution Name” text box, then click OK.

Angular

One more window should appear. Select the MVC Template in this popup and click OK. Now start cropping your image.

Configure Angular Image Crop and Bootstrap Filestyle

You can download the plugin from:

Open the _Layout.cshtml and refer the .js file from the downloaded folder to this view page.

Link your Angular configurable file in this code.

Angular Module

You will need to include the module as a dependency of your application.

Work in Angular Image Crop

This tree control will work when you use the < img-crop > directive as HTML attributes.

Using Bootstrap Filestyle directive:

HTML Code

CSS Code

Set the style in the image crop area design.

Angular Controller

Initiate the crop area as “circle.”

Angular Directive

You can use Bootstrap Filestyle as an Angular directive. When you will select the image using filestyle, set the element to the <img-crop> directive.

Angular Controller

Write the attribute ID:

Click the F5 button and run the application. Now it will appear in the browser and you can see the result.

Output 1

Angular

If you click the upload button, it will open file selectable windows and select any image in there.

Output 2

Angular

Once open, the image will be loaded in the image preview. The initial crop area will be represented as “Square.”

Conclusion

In this article, we have learned MVC using Angular Image Crop using Bootstrap Filestyle. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

Author Profile

Thiruppathi Rengasamy
I 'm a .Net Developer & Blogger. And also I'm working as senior software engineer in Microsoft Technologies for 5+ Years.I would like to spend my precious time in writing articles, research in .Net technologies and to learn new technologies.