Learn MVC Using Angular Image Crop

<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);
 
    functionfilestyle () {
 
        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!