DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Full-Stack Observability Essentials: Explore the fundamentals of system-wide observability and key components of the OpenTelemetry standard.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Why Angular and ASP.NET Core Make a Winning Team
  • jQuery vs. Angular: Common Differences You Must Know
  • Angular v16: A New Era of Angular Development
  • Angular Best Practices For Developing Efficient and Reliable Web Applications

Trending

  • Best Plugins For JetBrains IDEs
  • Architecting a Completely Private VPC Network and Automating the Deployment
  • Anomaly Detection: Leveraging Rule Engines to Minimize False Alarms
  • 5 Web3 Trends to Follow in 2023
  1. DZone
  2. Coding
  3. Frameworks
  4. Learn MVC Using Angular Image Crop

Learn MVC Using Angular Image Crop

Continue to hone your MVC skills with this tutorial, as we walk through the process of creating a web app using an Angular library and Bootstrap Filestyle.

Thiruppathi Rengasamy user avatar by
Thiruppathi Rengasamy
·
Updated Jul. 12, 17 · Tutorial
Like (3)
Save
Tweet
Share
5.57K Views

Join the DZone community and get the full member experience.

Join For Free

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:

angular

go to new menu >click new and project. now it will open the new project window.

angular

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.

angular

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

angular

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

output 2

angular

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!

AngularJS

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Why Angular and ASP.NET Core Make a Winning Team
  • jQuery vs. Angular: Common Differences You Must Know
  • Angular v16: A New Era of Angular Development
  • Angular Best Practices For Developing Efficient and Reliable Web Applications

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: