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

Angular

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

Angular

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

Angular

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

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

  1. “~/Plugin/angular/angular.min.js”>
  2.   “~/Plugin/angular-ui-router/release/angular-ui-router.min.js”>
  3.   “~/Plugin/ng-img-crop/compile/unminified/ng-img-crop.js”>
  4.   <link href=“~/Plugin/ng-img-crop/compile/unminified/ng-img-crop.css” rel=“stylesheet” />
  5.   “~/Plugin/bootstrap-filestyle/src/bootstrap-filestyle.js”>

Link your angular configurable file, whatever you given name

  1. “~/App/App.module.js”>
  2. “~/App/App.config.js”>
  3. “~/App/CIController.js”>

Angular Module

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

  1. var uiroute = angular
  2. .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.

  1. <img-crop image=“myImage”
  2.                                   result-image=“myCroppedImage”
  3.                                   area-type=“{{imgcropType}}”>
  4.                         </img-crop>

Using bootstrap file style directive

  1. <input id=“fileInput” filestyle=“”
  2. type=“file” data-class-button=“btn btn-default”
  3. data-class-input=“form-control”
  4. data-button-text=“Upload”  class=“form-control” />

Html Code

  1. “CIController ” class=“container-fluid”>
  2. class=“row”>
  3. class=“col-md-3”>
  4. class=“panel”>
  5. class=“panel-heading no-shadow”>
  6.                     “” ng-click=“reset()” class=“pull-right”>
  7.                         class=“fa fa-refresh text-muted”>
  8.                     Select an image file
  • class=“panel-body”>
  • class=“form-group”>
  •                         “fileInput” filestyle=“” type=“file” data-class-button=“btn btn-default” data-class-input=“form-control” data-button-text=“Upload”  class=“form-control” />
  •                     <p class=“pv”>Crop type:</p>
  • class=“btn-group btn-group-justified mb”>
  •                         “imgcropTypes(‘square’)”  class=“btn btn-default”>Square
  •                         “imgcropTypes(‘circle’)”  class=“btn btn-default”>Circle
  •                     <br />
  • “Cropped Image” class=“imgcrop-preview”>
  •                         “{{myCroppedImage}}” />
  •                 </div>
  •             </div>
  •         </div>
  • class=“col-md-9”>
  • class=“panel”>
  • class=“panel-body”>
  • class=“imgcrop-area”>
  •                         “myImage”
  •                                   result-image=“myCroppedImage”
  •                                   area-type=“{{imgcropType}}”>
  •                 </div>
  •             </div>
  •         </div>
  •     </div>
  • </div>

CSS Code

Set the style in the image crop area design

  1. .imgcrop-area {
  2.     width: 100%;
  3.     height: 410px;
  4.     overflow: hidden;
  5.     background: #e6e9ee;
  6. }
  7. .imgcrop-preview {
  8.     position: relative;
  9.     width: 100%;
  10.     height: 200px;
  11.     margin: 0 auto;
  12.     background: #e6e9ee;
  13.     text-align: center;
  14. }
  15.     .imgcrop-preview:after {
  16.         content: attr(data-text);
  17.         display: block;
  18.         position: absolute;
  19.         height: 50%;
  20.         text-align: center;
  21.         margin: auto;
  22.         top: 0;
  23.         left: 0;
  24.         bottom: 0;
  25.         right: 0;
  26.         z-index: 0;
  27.         color: #8394a9;
  28.     }
  29.     .imgcrop-preview > img {
  30.         position: relative;
  31.         z-index: 1;
  32.         max-width: 100%;
  33.     }

Angular Controller

Initiate the crop area as “circle”

  1. $scope.reset = function () {
  2.             $scope.myImage = ;
  3.             $scope.myCroppedImage = ;
  4.             $scope.imgcropType = ‘circle’;
  5.         };
  6.         $scope.imgcropTypes = function (mode)
  7.         {
  8.             $scope.imgcropType = mode;
  9.         }

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

  1. .directive(‘filestyle’, filestyle);
  2.     function filestyle() {
  3.         controller.$inject = [‘$scope’‘$element’];
  4.         return {
  5.             restrict: ‘A’,
  6.             controller: controller
  7.         };
  8.         function controller($scope, $element) {
  9.             var options = $element.data();
  10.             options.classInput = $element.data(‘classinput’) || options.classInput;
  11.             $element.filestyle(options);
  12.         }
  13.     }

Angular Controller

Write the attribute id on change read the data.

  1. var handleFileSelect = function (evt) {
  2.             var file = evt.currentTarget.files[0];
  3.             var reader = new FileReader();
  4.             reader.onload = function (evt) {
  5.                 $scope.$apply(function ($scope) {
  6.                     $scope.myImage = evt.target.result;
  7.                 });
  8.             };
  9.             if (file)
  10.                 reader.readAsDataURL(file);
  11.         };
  12.         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

Angular

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

Output 2

Angular

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”

Angular

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!…

Advertisements