Learn MVC Using Angular Image Crop

Thiruppathi R
7y
4.7k
0
5

Article

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

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

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”

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

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all