Learn MVC Using Angular Image Crop

Introduction

This article demonstrates learning MVC using angular image crop using bootstrap file style in the 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 area
• Fix crop area square /circle
• Fix type of image format
• Fix image quality

Following the steps you can use angular image crop in angular JS in MVC

• Create MVC Project
• Configure Angular image crop & Bootstrap filestyle
• Work in Angular image crop

Create MVC Project

Open the visual studio 2017



Go to New menu >Click New & project. Now it will open New Project Window



You can select ASP.NET Web Application on Framework 4.5. Enter the name of project in “Solution name” textbox then click ok button.



One more window should be appearing. Select MVC Template in this popup & Click ok button. Now start cropping image.

Configure Angular image crop & Bootstrap filestyle

You can download the plug in from

• Angular image crop
• Bootstrap filestyle

Open the _Layout.cshtml and must refer the .js file from 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, whatever you given name

<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 on your application. 

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

If you have any doubt in configuration, visit the following articles -

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report
• Learn MVC Using Angular Pie Chart
• Learn MVC Using Angular Flot Chart
• Learn MVC Using Angular xEditable
• Learn MVC Using Angular Idle
• Learn MVC Using Angular Wizard
• Learn MVC Using Angular - Maps
• Learn MVC Using Angular Bootstrap Nav Tree

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 file style 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 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 on change read the data. 

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 F5 button and Run the Application. Now it will appear in browser and you can see the result.

Output 1



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

Output 2



Once open the image it will be load in the image preview with initiate the crop area as “Square”

Output 3

If you click circle button crop area change as “circle”

Conclusion

In this article, we have learned mvc using angular image crop using bootstrap file style. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!...