Crop Image in AngularJS

By | April 17, 2016

In this article, We will learn how to crop a circle or a square out of an image with the help of image Crop directive in AngularJS.

Firstly, add some library or css files in project as below

<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet" />

Add below code to crop image using angularJS

angular.module('app', ['ngImgCrop'])
.controller('Ctrl', function ($scope) {
$scope.myImage = '';
$scope.myCroppedImage = '';

var handleFileSelect = function (evt) {
var file = evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function ($scope) {
$scope.myImage =;
angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);


Add below code to download the cropable image

<script src=""></script>
<!--download the cropable image-->
$(document).ready(function () {
$("#download").click(function () {
var imgsrc = $("#newimg").attr('src');
var a = $("<a>").attr('href', imgsrc).attr("download", "cropImg.png").appendTo("body");
<!--This is the css for cropping-->
background: #E4E4E4;
overflow: hidden;
<body ng-app="app" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
<div>Cropped Image: <input type="button" id="download" value="Download image" />

<div><img id="newimg" ng-src="{{myCroppedImage}}" />



Like it? Share it
  • Gobind Mandal

    Thanks its helpful for me