Image Crop and Rotate

Posted By : Hitesh Arora | 10-Dec-2014

angularjs

In most of the web applications image crop/rotate are very common. For profile pictures like in linkedin we can set our profile picture in our own way by positioning the image where we want to and at any angle but the most important is which framework you are using.
Angular js is new and got very popular in a short span of time so it is very difficult to get things done using angularjs.
So , I am going to discuss some steps which makes easier for all to perform image crop and rotate .

Step 1: Render your HTML page where you will perform the image operations.

Step 2: Include angular js in your application.Use this cdn in you html for angularjs.
cdn for angularjs:

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js

Step 3: Now include the library in your application for imagecropping and rotating.

http://sotos.gr/demos/crop-image/js/sotos.crop-image.min.js' >

It includes-
a.directive for imagecrop which will perform on the image you want to perform operation.
b.directive for editcrop , for image-crop/rotate
c.directive for viewcrop , which is used to display the resultant image while performing operation

Step 4: Now define angularjs in your application which can be done by using ng-app. It is a directive that defines an angularjs application as well as to control the data of angularjs application make the use of ng-controller.

<body ng-app="app" ng-controller = "cropCtrl">

define the controller as well -

    var app = angular.module('app',['sotos.crop-image']);
    app.controller('cropCtrl',['$scope',function($scope){
    	//output image
    	$scope.imageOut='';
    	//options for operation
    	$scope.options={};
    	//input image
    	$scope.options.image="../images/family0.jpg"            
    	//canvas size default 480
    	$scope.options.viewSizeWidth= 500;      
    	$scope.options.viewSizeHeight= 500;
    	//if rotate tool show default true
    	//$scope.cropOptions.viewShowRotateBtn= true;   
    	$scope.options.watermarkType="image";
    	$scope.options.watermarkText="";
    	//if this check the image crop by the original size off image and no resize
    	$scope.options.outputImageSelfSizeCrop= true;
    	$scope.options.viewShowCropTool= true;
    	$scope.cropImage= function(){
    	     $scope.$broadcast('cropImage');
     	};
     	$scope.saveImage= function(){
             $scope.$broadcast('cropImageSave');
     	};
     	$scope.showImage= function(){
     	     $scope.$broadcast('cropImageShow');
     	};
     }]);

Step 5: Now your application is a angularjs supportive. Its time to make use of directives that is defined in step 3 for image crop-rotate.

  <image-crop image-out="imageOut" crop-options="options" ng-transclude>

          <edit-crop></edit-crop>
          <view-crop></view-crop>
      </image-crop>

Attributes used :
image-out : path for the resultant-image
crop-options : includes all the options for the image operation like the size of the canvas , to enable-disable rotate option.

These are all the steps that is useful for basic image-crop/rotate using angular js .

THANKS FOR YOUR TIME