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:

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

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.

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:

• Angular Image Crop
• Bootstrap Filestyle

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

<script src="~/Plugin/angular/angular.min.js"></script>  
  <script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>  
  <script src="~/Plugin/ng-img-crop/compile/unminified/ng-img-crop.js"></script>  
  <link href="~/Plugin/ng-img-crop/compile/unminified/ng-img-crop.css" rel="stylesheet" />  
  <script src="~/Plugin/bootstrap-filestyle/src/bootstrap-filestyle.js"></script>   

Link your Angular configurable file in this code. 

<script src="~/App/App.module.js"></script>  
<script src="~/App/App.config.js"></script>  
<script src="~/App/CIController.js"></script>   

Angular Module

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

var uiroute = angular  
.module('uiroute', ['ui.router','ngImgCrop']);   

Work in Angular Image Crop

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

<img-crop image="myImage"   
                                  result-image="myCroppedImage"   
                                  area-type="{{imgcropType}}">  
                        </img-crop>   

Using Bootstrap Filestyle directive:

<input id="fileInput" filestyle=""   
type="file" data-class-button="btn btn-default"   
data-class-input="form-control"   
data-button-text="Upload"  class="form-control" />   

HTML Code

<div ng-controller="CIController " class="container-fluid">  
    <div class="row">  
        <div class="col-md-3">  
            <div class="panel">  
                <div class="panel-heading no-shadow">  
                    <a href="" ng-click="reset()" class="pull-right">  
                        <small class="fa fa-refresh text-muted"></small>  
                    </a>Select an image file  
                </div>  
                <div class="panel-body">  
                    <div class="form-group">  
                        <input id="fileInput" filestyle="" type="file" data-class-button="btn btn-default" data-class-input="form-control" data-button-text="Upload"  class="form-control" />  
                    </div>  
                    <p class="pv">Crop type:</p>  
                    <div class="btn-group btn-group-justified mb">  
                        <label ng-click="imgcropTypes('square')"  class="btn btn-default">Square</label>  
                        <label ng-click="imgcropTypes('circle')"  class="btn btn-default">Circle</label>  
                    </div>  
                    <br />  
                    <div data-text="Cropped Image" class="imgcrop-preview">  
                        <img ng-src="{{myCroppedImage}}" />  
                    </div>  
                </div>  
            </div>  
        </div>  
        <div class="col-md-9">  
            <div class="panel">  
                <div class="panel-body">  
                    <div class="imgcrop-area">  
                        <img-crop image="myImage"   
                                  result-image="myCroppedImage"   
                                  area-type="{{imgcropType}}">  
                        </img-crop>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>    

CSS Code

Set the style in the image crop area design.

.imgcrop-area {  
    width: 100%;  
    height: 410px;  
    overflow: hidden;  
    background: #e6e9ee;  
}  

.imgcrop-preview {  
    position: relative;  
    width: 100%;  
    height: 200px;  
    margin: 0 auto;  
    background: #e6e9ee;  
    text-align: center;  
}  

    .imgcrop-preview:after {  
        content: attr(data-text);  
        display: block;  
        position: absolute;  
        height: 50%;  
        text-align: center;  
        margin: auto;  
        top: 0;  
        left: 0;  
        bottom: 0;  
        right: 0;  
        z-index: 0;  
        color: #8394a9;  
    }  

    .imgcrop-preview > img {  
        position: relative;  
        z-index: 1;  
        max-width: 100%;  
    }   

Angular Controller

Initiate the crop area as “circle.”

$scope.reset = function () {  
            $scope.myImage = '';  
            $scope.myCroppedImage = '';  
            $scope.imgcropType = 'circle';  
        };  
        $scope.imgcropTypes = function (mode)  
        {  
            $scope.imgcropType = mode;  
        }   

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.

.directive('filestyle', filestyle);  

    function filestyle() {  

        controller.$inject = ['$scope', '$element'];  
        return {  
            restrict: 'A',  
            controller: controller  
        };  

        function controller($scope, $element) {  
            var options = $element.data();  
            options.classInput = $element.data('classinput') || options.classInput;  

            $element.filestyle(options);  
        }  
    }   

Angular Controller

Write the attribute ID:

var handleFileSelect = function (evt) {  
            var file = evt.currentTarget.files[0];  
            var reader = new FileReader();  
            reader.onload = function (evt) {  
                $scope.$apply(function ($scope) {  
                    $scope.myImage = evt.target.result;  
                });  
            };  
            if (file)  
                reader.readAsDataURL(file);  
        };  

        angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);   

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

Output 1

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

Output 2

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!