diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d14edf8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,22 @@
+# Created by http://gitignore.io
+
+### SublimeText ###
+*.sublime-*
+
+### vim related ###
+*.swp
+*.swo
+
+### OSX related ###
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+
+### IDE-related ###
+.idea
+*.iml
+
+### Package folders ###
+bower_components/
+node_modules/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..db9c526
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,28 @@
+The stylesheet of **angular-image-crop** is written in [LESS](http://lesscss.org/).
+
+#Setup
+1. [Fork this project](https://help.github.com/articles/fork-a-repo) and clone it on your system.
+2. Create a new branch out off `master` for your fix/feature. `git checkout new-feature master`
+
+#Building
+
+**angular-image-crop.js** and **angular-image-crop.css** uses [Grunt](http://gruntjs.com/) for the build process which you need to have installed on your system.
+
+Also there are four additional Grunt tasks required to build the library:
+
+1. [grunt-contrib-copy](https://npmjs.org/package/grunt-contrib-copy)
+
+2. [grunt-contrib-less](https://www.npmjs.com/package/grunt-contrib-less)
+
+3. [grunt-contrib-uglify](https://www.npmjs.com/package/grunt-contrib-uglify)
+
+4. [grunt-contrib-watch](https://www.npmjs.com/package/grunt-contrib-watch)
+
+To install all the dependencies, run `npm install`.
+
+Once you have the dependencies installed, run `grunt` from the project directory. This will run the default grunt task which compiles the files in `src` folder and stores them (and their minified forms) into `dist` folder.
+
+#Things to remember
+- Before submitting a patch, rebase your branch on upstream `master` to make life easier for the merger/author.
+
+- **DO NOT** add the final build files (compiled in `dist` folder) into your commits. It will be compiled again and updated later, once your patch has been merged by the merger/author.
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..0f6e47c
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,64 @@
+module.exports = function (grunt) {
+  grunt.initConfig({
+    'pkg': grunt.file.readJSON('package.json'),
+    'less': {
+      'unminified': {
+        src: ['src/<%= pkg.name %>.less'],
+        dest: 'dist/<%= pkg.name %>.css'
+      },
+      'minified': {
+        options: {
+          compress: true
+        },
+        src: ['src/<%= pkg.name %>.less'],
+        dest: 'dist/<%= pkg.name %>.min.css'
+      }
+    },
+    ngAnnotate: {
+      'js': {
+        options: {
+          single_quotes: true
+        },
+        src: 'src/<%= pkg.name %>.js',
+        dest: 'dist/<%= pkg.name %>.js'
+      }
+    },
+    uglify: {
+      'js': {
+        options: {
+          toplevel: true,
+          warnings: true,
+          compress: true,
+          mangle: {
+            reserved: ['BinaryFile', 'EXIF']
+          },
+          output: {
+            beautify: false,
+            preamble: "/* AngularJS Directive - <%= pkg.name %> v<%= pkg.version %> (minified) - license <%= pkg.license %> */",
+            max_line_len: 120000
+          }
+        },
+        src: ['dist/<%= pkg.name %>.js'],
+        dest: 'dist/<%= pkg.name %>.min.js'
+      }
+    },
+    watch: {
+      'js' : {
+        files: ['src/**.js'],
+        tasks: ['ngAnnotate', 'uglify']
+      },
+      'less' : {
+        files: ['src/**.less'],
+        tasks: ['less']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-ng-annotate');
+
+  grunt.registerTask('default', ['less', 'ngAnnotate', 'uglify']);
+};
diff --git a/README.md b/README.md
index 3737809..2e63709 100644
--- a/README.md
+++ b/README.md
@@ -14,11 +14,23 @@ I'm attempting to make a self-contained AngularJS Directive which will allow you
 # Browser Support
 * IE10+, Android 3+, iOS 6+, basically all modern browsers!
 
+# Installation
+Get the library and its stylesheet using one of the following ways:
+
+1. **Github**
+ - [unminified] : [angular-angular-image-crop.js](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.js) and [angular-image-crop.css](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.css)
+ - [minified] : [angular-image-crop.min.js](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.min.js) and [angular-image-crop.min.css](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.min.css)
+ 
+2. **Bower**
+ 
+  ```
+  bower install angular-image-crop
+  ```
 # Usage
 
-1. Add the dependency : `angular.module('myApp',['ImageCropper'])`
-2. Include the stylesheet
-3. Initiatlise the directive [see standalone JSBin](http://jsbin.com/fovovu/1/edit?javascript,output) for example code.
+1. Include both files inside the `<head>` element
+2. Add the dependency : `angular.module('myApp',['ImageCropper'])`
+3. Initialise the directive [see standalone JSBin](http://jsbin.com/fovovu/1/edit?javascript,output) for example code.
 
 ## Parameters
 
@@ -28,25 +40,31 @@ I'm attempting to make a self-contained AngularJS Directive which will allow you
 * max-size (integer) - max size of the image, in pixels
 * shape (string) - the cropping guideline shape (circle/square)
 * step (bound integer) - the variable which dictates which step the user will see (used for resetting purposes)
+* safe-move(string true/false) - allow moving the image under the cropping area without restrictions
+* fill-color(string color name / HEX) - the color to fill with the empty space (used with safe-move)
 * src (bound Blob or base64 string) - scope variable that will be the source image for the crop
 * result (bound string) - the variable which will have the resulting data uri bound to it
 * result-blob (bound Blob) - the variable which will have the resulting data as a Blob object
 * crop (bound boolean) - scope variable that must be set to true when the image is ready to be cropped
+* result-format - setting the result file format if different from default "image/png", optional
 
 ### Example markup
 ```html
-<image-crop			 
+<image-crop
  data-height="200"
  data-width="150"
  data-shape="square"
  data-step="imageCropStep"
+ data-safe-move='true'
+ data-fill-color="red"
  src="imgSrc"
  data-result="result"
  data-result-blob="resultBlob"
+ data-result-format="image/jpeg"
  crop="initCrop"
  padding="250"
  max-size="1024"
-></image-crop>	
+></image-crop>
 ```
 
 # See a standalone working example
diff --git a/bower.json b/bower.json
index 1d5da56..12b149f 100644
--- a/bower.json
+++ b/bower.json
@@ -1,16 +1,23 @@
 {
   "name": "angular-image-crop",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "homepage": "http://andyshora.com/angular-image-cropper.html",
   "authors": [
     "Andy Shora <andyshora@gmail.com>"
   ],
+  "contributors": [
+    "Ashish Bardhan <ashbardhan@gmail.com>"
+  ],
   "description": "A better way to crop images client-side using AngularJS",
   "main": [
-    "image-crop.js",
-    "image-crop-styles.css"
+    "dist/angular-image-crop.min.js",
+    "dist/angular-image-crop-styles.min.css"
+  ],
+  "ignore": [
+    "src/*.js",
+    "CONTRIBUTING.md",
+    "Gruntfile.js"
   ],
-  "ignore": [],
   "keywords": [
     "angular",
     "angularjs",
diff --git a/index.html b/demo/index.html
similarity index 87%
rename from index.html
rename to demo/index.html
index 0853b2a..5c63458 100644
--- a/index.html
+++ b/demo/index.html
@@ -9,49 +9,49 @@
   
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
   <!-- REQUIRED 1/3 - AngularJS Core -->
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
   <!-- REQUIRED 2/3 - styles for the image crop component -->
-  <link rel="stylesheet" href="image-crop-styles.css">
-  
+  <link rel="stylesheet" href="../dist/angular-image-crop.min.css">
+
   <script>
-  
+
     var myApp = null;
-	
+
     (function() {
 
-    angular.module('myApp', ['ImageCropper'])  
-	  
+    angular.module('myApp', ['ImageCropper'])
+
 	.controller('MainController', ['$scope', function($scope) {
-		
-		$scope.fileChanged = function(e) {			
-		
+
+		$scope.fileChanged = function(e) {
+
 			var files = e.target.files;
-		
+
      		var fileReader = new FileReader();
-			fileReader.readAsDataURL(files[0]);		
-			
+			fileReader.readAsDataURL(files[0]);
+
 			fileReader.onload = function(e) {
 				$scope.imgSrc = this.result;
 				$scope.$apply();
 			};
-			
-		}		
-	   
+
+		}
+
 		$scope.clear = function() {
 			 $scope.imageCropStep = 1;
 			 delete $scope.imgSrc;
 			 delete $scope.result;
 			 delete $scope.resultBlob;
 		};
-		
+
 	}]);
 
     })();
   </script>
-  
+
   <!-- REQUIRED 3/3 - the image crop directive -->
-  <script src="image-crop.js"></script>
-  
+  <script src="../dist/angular-image-crop.min.js"></script>
+
   <style>
     /* Styles for this demo page */
     body {
@@ -104,6 +104,7 @@
 			 src="imgSrc" //scope variable that will be the source image for the crop (may be a Blob or base64 string)
 			 data-result-blob="result" //scope variable that will contain the Blob information
 			 data-result="resultDataUrl" //scope variable that will contain the image's base64 string representation
+			 data-result-format="image/jpeg" // result file format, if different from default "image/png", optional
 			 crop="initCrop" //scope variable that must be set to true when the image is ready to be cropped
 			 padding="250" //space, in pixels, rounding the shape
 			 max-size="1024" //max of the image, in pixels
@@ -115,6 +116,8 @@
 			 data-shape="square"
 			 data-step="imageCropStep"
 			 src="imgSrc"
+			 data-safe-move="false"
+			 data-fill-color="red"
 			 data-result="result"
 			 data-result-blob="resultBlob"
 			 crop="initCrop"
@@ -144,4 +147,4 @@ <h2>Result</h2>
 	   
      </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index2.html b/demo/index2.html
similarity index 94%
rename from index2.html
rename to demo/index2.html
index fdcce9b..e8d17a7 100644
--- a/index2.html
+++ b/demo/index2.html
@@ -6,9 +6,9 @@
   <title>Test</title>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
   <!-- REQUIRED 1/3 - AngularJS Core -->
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
   <!-- REQUIRED 2/3 - styles for the image crop component -->
-  <link rel="stylesheet" href="image-crop-styles.css">
+  <link rel="stylesheet" href="../dist/angular-image-crop.min.css">
   <script>
     var myApp = null;
     (function() {
@@ -40,7 +40,7 @@
     })();
   </script>
   <!-- REQUIRED 3/3 - the image crop directive -->
-  <script src="image-crop.js"></script>
+  <script src="../dist/angular-image-crop.min.js"></script>
   <style>
     /* Styles for this demo page */
     body {
@@ -116,4 +116,4 @@ <h2>Result</h2>
        <p ng-hide="imageCropResult2">Not cropped yet</p>
      </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/image-crop-styles.css b/dist/angular-image-crop.css
similarity index 68%
rename from image-crop-styles.css
rename to dist/angular-image-crop.css
index 2da5e01..07c02bc 100644
--- a/image-crop-styles.css
+++ b/dist/angular-image-crop.css
@@ -1,8 +1,8 @@
-/* Some of these styles you can override, things like colors,
+/*
+ * ANGULAR-IMAGE-CROP Basic Styling
+ * Some of these styles you can override, things like colors,
  * however some styles are required for the structure, and are critical to this module behaving properly!
  */
-
-/* Core component styles */
 .ng-image-crop {
   text-align: center;
   margin: 0 auto;
@@ -13,49 +13,35 @@
   -o-user-select: none;
   user-select: none;
 }
-/* Each of the 3 steps in the process are contained within sections */
 .ng-image-crop > section {
   background: #ccc;
 }
-/* The cropping button */
 .ng-image-crop button {
   margin-top: 10px;
 }
-/* The dashed cropping guideline */
 .ng-image-crop .cropping-guide {
   display: block;
-  background: rgba(255, 255, 255, .3);
+  background: rgba(255, 255, 255, 0.3);
   border: 2px dashed white;
   position: absolute;
   pointer-events: none;
 }
-/* The circular themed cropping guideline */
-.ng-image-crop--circle .cropping-guide {
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
-}
-/* The canvas where the user positions the image via dragging and zooming */
 .ng-image-crop .cropping-canvas {
-  background: rgba(255, 255, 255, .3);
+  background: rgba(255, 255, 255, 0.3);
   margin: 0 auto;
   cursor: move;
 }
-/* The overlayed draggable zoom handle in the corner of the module */
 .ng-image-crop .zoom-handle {
   display: block;
   position: absolute;
   bottom: 1px;
   left: 1px;
-  background: rgba(255,255,255,0.7);
+  background: rgba(255, 255, 255, 0.7);
   width: 80px;
   height: 80px;
   cursor: move;
   border-radius: 200px 50px;
 }
-/* The text within the zoom handle */
 .ng-image-crop .zoom-handle > span {
   color: rgba(0, 0, 0, 0.5);
   -webkit-transform: rotate(-45deg);
@@ -66,4 +52,11 @@
   display: block;
   position: relative;
   top: 32px;
-}
\ No newline at end of file
+}
+.ng-image-crop--circle .cropping-guide {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+}
diff --git a/dist/angular-image-crop.js b/dist/angular-image-crop.js
new file mode 100644
index 0000000..29b7704
--- /dev/null
+++ b/dist/angular-image-crop.js
@@ -0,0 +1,1358 @@
+/**
+ * AngularJS Directive - Image Crop v2.0.2
+ * Copyright (c) 2014 Andy Shora, andyshora@gmail.com, andyshora.com
+ * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
+ */
+(function() {
+
+  /*
+   * DEPENDENCY
+   * Javascript BinaryFile
+   * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
+   * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
+   */
+
+  var BinaryFile = function(strData, iDataOffset, iDataLength) {
+      var data = strData;
+      var dataOffset = iDataOffset || 0;
+      var dataLength = 0;
+
+      this.getRawData = function() {
+          return data;
+      }
+
+      if (typeof strData == "string") {
+          dataLength = iDataLength || data.length;
+
+          this.getByteAt = function(iOffset) {
+              return data.charCodeAt(iOffset + dataOffset) & 0xFF;
+          }
+
+          this.getBytesAt = function(iOffset, iLength) {
+              var aBytes = [];
+
+              for (var i = 0; i < iLength; i++) {
+                  aBytes[i] = data.charCodeAt((iOffset + i) + dataOffset) & 0xFF
+              }
+              ;
+
+              return aBytes;
+          }
+      } else if (typeof strData == "unknown") {
+          dataLength = iDataLength || IEBinary_getLength(data);
+
+          this.getByteAt = function(iOffset) {
+              return IEBinary_getByteAt(data, iOffset + dataOffset);
+          }
+
+          this.getBytesAt = function(iOffset, iLength) {
+              return new VBArray(IEBinary_getBytesAt(data, iOffset + dataOffset, iLength)).toArray();
+          }
+      }
+
+      this.getLength = function() {
+          return dataLength;
+      }
+
+      this.getSByteAt = function(iOffset) {
+          var iByte = this.getByteAt(iOffset);
+          if (iByte > 127)
+              return iByte - 256;
+          else
+              return iByte;
+      }
+
+      this.getShortAt = function(iOffset, bBigEndian) {
+          var iShort = bBigEndian ?
+                  (this.getByteAt(iOffset) << 8) + this.getByteAt(iOffset + 1)
+                  : (this.getByteAt(iOffset + 1) << 8) + this.getByteAt(iOffset)
+          if (iShort < 0)
+              iShort += 65536;
+          return iShort;
+      }
+      this.getSShortAt = function(iOffset, bBigEndian) {
+          var iUShort = this.getShortAt(iOffset, bBigEndian);
+          if (iUShort > 32767)
+              return iUShort - 65536;
+          else
+              return iUShort;
+      }
+      this.getLongAt = function(iOffset, bBigEndian) {
+          var iByte1 = this.getByteAt(iOffset),
+                  iByte2 = this.getByteAt(iOffset + 1),
+                  iByte3 = this.getByteAt(iOffset + 2),
+                  iByte4 = this.getByteAt(iOffset + 3);
+
+          var iLong = bBigEndian ?
+                  (((((iByte1 << 8) + iByte2) << 8) + iByte3) << 8) + iByte4
+                  : (((((iByte4 << 8) + iByte3) << 8) + iByte2) << 8) + iByte1;
+          if (iLong < 0)
+              iLong += 4294967296;
+          return iLong;
+      }
+      this.getSLongAt = function(iOffset, bBigEndian) {
+          var iULong = this.getLongAt(iOffset, bBigEndian);
+          if (iULong > 2147483647)
+              return iULong - 4294967296;
+          else
+              return iULong;
+      }
+
+      this.getStringAt = function(iOffset, iLength) {
+          var aStr = [];
+
+          var aBytes = this.getBytesAt(iOffset, iLength);
+          for (var j = 0; j < iLength; j++) {
+              aStr[j] = String.fromCharCode(aBytes[j]);
+          }
+          return aStr.join("");
+      }
+
+      this.getCharAt = function(iOffset) {
+          return String.fromCharCode(this.getByteAt(iOffset));
+      }
+      this.toBase64 = function() {
+          return window.btoa(data);
+      }
+      this.fromBase64 = function(strBase64) {
+          data = window.atob(strBase64);
+      }
+  };
+  /*
+   * DEPENDENCY
+   * Javascript EXIF Reader 0.1.6
+   * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
+   * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
+   */
+  var EXIF = (function() {
+
+      var debug = false;
+
+      var ExifTags = {
+
+          // version tags
+          0x9000: "ExifVersion", // EXIF version
+          0xA000: "FlashpixVersion", // Flashpix format version
+
+          // colorspace tags
+          0xA001: "ColorSpace", // Color space information tag
+
+          // image configuration
+          0xA002: "PixelXDimension", // Valid width of meaningful image
+          0xA003: "PixelYDimension", // Valid height of meaningful image
+          0x9101: "ComponentsConfiguration", // Information about channels
+          0x9102: "CompressedBitsPerPixel", // Compressed bits per pixel
+
+          // user information
+          0x927C: "MakerNote", // Any desired information written by the manufacturer
+          0x9286: "UserComment", // Comments by user
+
+          // related file
+          0xA004: "RelatedSoundFile", // Name of related sound file
+
+          // date and time
+          0x9003: "DateTimeOriginal", // Date and time when the original image was generated
+          0x9004: "DateTimeDigitized", // Date and time when the image was stored digitally
+          0x9290: "SubsecTime", // Fractions of seconds for DateTime
+          0x9291: "SubsecTimeOriginal", // Fractions of seconds for DateTimeOriginal
+          0x9292: "SubsecTimeDigitized", // Fractions of seconds for DateTimeDigitized
+
+          // picture-taking conditions
+          0x829A: "ExposureTime", // Exposure time (in seconds)
+          0x829D: "FNumber", // F number
+          0x8822: "ExposureProgram", // Exposure program
+          0x8824: "SpectralSensitivity", // Spectral sensitivity
+          0x8827: "ISOSpeedRatings", // ISO speed rating
+          0x8828: "OECF", // Optoelectric conversion factor
+          0x9201: "ShutterSpeedValue", // Shutter speed
+          0x9202: "ApertureValue", // Lens aperture
+          0x9203: "BrightnessValue", // Value of brightness
+          0x9204: "ExposureBias", // Exposure bias
+          0x9205: "MaxApertureValue", // Smallest F number of lens
+          0x9206: "SubjectDistance", // Distance to subject in meters
+          0x9207: "MeteringMode", // Metering mode
+          0x9208: "LightSource", // Kind of light source
+          0x9209: "Flash", // Flash status
+          0x9214: "SubjectArea", // Location and area of main subject
+          0x920A: "FocalLength", // Focal length of the lens in mm
+          0xA20B: "FlashEnergy", // Strobe energy in BCPS
+          0xA20C: "SpatialFrequencyResponse", //
+          0xA20E: "FocalPlaneXResolution", // Number of pixels in width direction per FocalPlaneResolutionUnit
+          0xA20F: "FocalPlaneYResolution", // Number of pixels in height direction per FocalPlaneResolutionUnit
+          0xA210: "FocalPlaneResolutionUnit", // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution
+          0xA214: "SubjectLocation", // Location of subject in image
+          0xA215: "ExposureIndex", // Exposure index selected on camera
+          0xA217: "SensingMethod", // Image sensor type
+          0xA300: "FileSource", // Image source (3 == DSC)
+          0xA301: "SceneType", // Scene type (1 == directly photographed)
+          0xA302: "CFAPattern", // Color filter array geometric pattern
+          0xA401: "CustomRendered", // Special processing
+          0xA402: "ExposureMode", // Exposure mode
+          0xA403: "WhiteBalance", // 1 = auto white balance, 2 = manual
+          0xA404: "DigitalZoomRation", // Digital zoom ratio
+          0xA405: "FocalLengthIn35mmFilm", // Equivalent foacl length assuming 35mm film camera (in mm)
+          0xA406: "SceneCaptureType", // Type of scene
+          0xA407: "GainControl", // Degree of overall image gain adjustment
+          0xA408: "Contrast", // Direction of contrast processing applied by camera
+          0xA409: "Saturation", // Direction of saturation processing applied by camera
+          0xA40A: "Sharpness", // Direction of sharpness processing applied by camera
+          0xA40B: "DeviceSettingDescription", //
+          0xA40C: "SubjectDistanceRange", // Distance to subject
+
+          // other tags
+          0xA005: "InteroperabilityIFDPointer",
+          0xA420: "ImageUniqueID"   // Identifier assigned uniquely to each image
+      };
+
+      var TiffTags = {
+          0x0100: "ImageWidth",
+          0x0101: "ImageHeight",
+          0x8769: "ExifIFDPointer",
+          0x8825: "GPSInfoIFDPointer",
+          0xA005: "InteroperabilityIFDPointer",
+          0x0102: "BitsPerSample",
+          0x0103: "Compression",
+          0x0106: "PhotometricInterpretation",
+          0x0112: "Orientation",
+          0x0115: "SamplesPerPixel",
+          0x011C: "PlanarConfiguration",
+          0x0212: "YCbCrSubSampling",
+          0x0213: "YCbCrPositioning",
+          0x011A: "XResolution",
+          0x011B: "YResolution",
+          0x0128: "ResolutionUnit",
+          0x0111: "StripOffsets",
+          0x0116: "RowsPerStrip",
+          0x0117: "StripByteCounts",
+          0x0201: "JPEGInterchangeFormat",
+          0x0202: "JPEGInterchangeFormatLength",
+          0x012D: "TransferFunction",
+          0x013E: "WhitePoint",
+          0x013F: "PrimaryChromaticities",
+          0x0211: "YCbCrCoefficients",
+          0x0214: "ReferenceBlackWhite",
+          0x0132: "DateTime",
+          0x010E: "ImageDescription",
+          0x010F: "Make",
+          0x0110: "Model",
+          0x0131: "Software",
+          0x013B: "Artist",
+          0x8298: "Copyright"
+      };
+
+      var GPSTags = {
+          0x0000: "GPSVersionID",
+          0x0001: "GPSLatitudeRef",
+          0x0002: "GPSLatitude",
+          0x0003: "GPSLongitudeRef",
+          0x0004: "GPSLongitude",
+          0x0005: "GPSAltitudeRef",
+          0x0006: "GPSAltitude",
+          0x0007: "GPSTimeStamp",
+          0x0008: "GPSSatellites",
+          0x0009: "GPSStatus",
+          0x000A: "GPSMeasureMode",
+          0x000B: "GPSDOP",
+          0x000C: "GPSSpeedRef",
+          0x000D: "GPSSpeed",
+          0x000E: "GPSTrackRef",
+          0x000F: "GPSTrack",
+          0x0010: "GPSImgDirectionRef",
+          0x0011: "GPSImgDirection",
+          0x0012: "GPSMapDatum",
+          0x0013: "GPSDestLatitudeRef",
+          0x0014: "GPSDestLatitude",
+          0x0015: "GPSDestLongitudeRef",
+          0x0016: "GPSDestLongitude",
+          0x0017: "GPSDestBearingRef",
+          0x0018: "GPSDestBearing",
+          0x0019: "GPSDestDistanceRef",
+          0x001A: "GPSDestDistance",
+          0x001B: "GPSProcessingMethod",
+          0x001C: "GPSAreaInformation",
+          0x001D: "GPSDateStamp",
+          0x001E: "GPSDifferential"
+      };
+
+      var StringValues = {
+          ExposureProgram: {
+              0: "Not defined",
+              1: "Manual",
+              2: "Normal program",
+              3: "Aperture priority",
+              4: "Shutter priority",
+              5: "Creative program",
+              6: "Action program",
+              7: "Portrait mode",
+              8: "Landscape mode"
+          },
+          MeteringMode: {
+              0: "Unknown",
+              1: "Average",
+              2: "CenterWeightedAverage",
+              3: "Spot",
+              4: "MultiSpot",
+              5: "Pattern",
+              6: "Partial",
+              255: "Other"
+          },
+          LightSource: {
+              0: "Unknown",
+              1: "Daylight",
+              2: "Fluorescent",
+              3: "Tungsten (incandescent light)",
+              4: "Flash",
+              9: "Fine weather",
+              10: "Cloudy weather",
+              11: "Shade",
+              12: "Daylight fluorescent (D 5700 - 7100K)",
+              13: "Day white fluorescent (N 4600 - 5400K)",
+              14: "Cool white fluorescent (W 3900 - 4500K)",
+              15: "White fluorescent (WW 3200 - 3700K)",
+              17: "Standard light A",
+              18: "Standard light B",
+              19: "Standard light C",
+              20: "D55",
+              21: "D65",
+              22: "D75",
+              23: "D50",
+              24: "ISO studio tungsten",
+              255: "Other"
+          },
+          Flash: {
+              0x0000: "Flash did not fire",
+              0x0001: "Flash fired",
+              0x0005: "Strobe return light not detected",
+              0x0007: "Strobe return light detected",
+              0x0009: "Flash fired, compulsory flash mode",
+              0x000D: "Flash fired, compulsory flash mode, return light not detected",
+              0x000F: "Flash fired, compulsory flash mode, return light detected",
+              0x0010: "Flash did not fire, compulsory flash mode",
+              0x0018: "Flash did not fire, auto mode",
+              0x0019: "Flash fired, auto mode",
+              0x001D: "Flash fired, auto mode, return light not detected",
+              0x001F: "Flash fired, auto mode, return light detected",
+              0x0020: "No flash function",
+              0x0041: "Flash fired, red-eye reduction mode",
+              0x0045: "Flash fired, red-eye reduction mode, return light not detected",
+              0x0047: "Flash fired, red-eye reduction mode, return light detected",
+              0x0049: "Flash fired, compulsory flash mode, red-eye reduction mode",
+              0x004D: "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",
+              0x004F: "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",
+              0x0059: "Flash fired, auto mode, red-eye reduction mode",
+              0x005D: "Flash fired, auto mode, return light not detected, red-eye reduction mode",
+              0x005F: "Flash fired, auto mode, return light detected, red-eye reduction mode"
+          },
+          SensingMethod: {
+              1: "Not defined",
+              2: "One-chip color area sensor",
+              3: "Two-chip color area sensor",
+              4: "Three-chip color area sensor",
+              5: "Color sequential area sensor",
+              7: "Trilinear sensor",
+              8: "Color sequential linear sensor"
+          },
+          SceneCaptureType: {
+              0: "Standard",
+              1: "Landscape",
+              2: "Portrait",
+              3: "Night scene"
+          },
+          SceneType: {
+              1: "Directly photographed"
+          },
+          CustomRendered: {
+              0: "Normal process",
+              1: "Custom process"
+          },
+          WhiteBalance: {
+              0: "Auto white balance",
+              1: "Manual white balance"
+          },
+          GainControl: {
+              0: "None",
+              1: "Low gain up",
+              2: "High gain up",
+              3: "Low gain down",
+              4: "High gain down"
+          },
+          Contrast: {
+              0: "Normal",
+              1: "Soft",
+              2: "Hard"
+          },
+          Saturation: {
+              0: "Normal",
+              1: "Low saturation",
+              2: "High saturation"
+          },
+          Sharpness: {
+              0: "Normal",
+              1: "Soft",
+              2: "Hard"
+          },
+          SubjectDistanceRange: {
+              0: "Unknown",
+              1: "Macro",
+              2: "Close view",
+              3: "Distant view"
+          },
+          FileSource: {
+              3: "DSC"
+          },
+          Components: {
+              0: "",
+              1: "Y",
+              2: "Cb",
+              3: "Cr",
+              4: "R",
+              5: "G",
+              6: "B"
+          }
+      };
+
+      function addEvent(element, event, handler) {
+          if (element.addEventListener) {
+              element.addEventListener(event, handler, false);
+          } else if (element.attachEvent) {
+              element.attachEvent("on" + event, handler);
+          }
+      }
+
+      function imageHasData(img) {
+          return !!(img.exifdata);
+      }
+
+      function getImageData(img, callback) {
+          BinaryAjax(img.src, function(http) {
+              var data = findEXIFinJPEG(http.binaryResponse);
+              img.exifdata = data || {};
+              if (callback) {
+                  callback.call(img)
+              }
+          });
+      }
+
+      function findEXIFinJPEG(file) {
+          if (file.getByteAt(0) != 0xFF || file.getByteAt(1) != 0xD8) {
+              return false; // not a valid jpeg
+          }
+
+          var offset = 2,
+                  length = file.getLength(),
+                  marker;
+
+          while (offset < length) {
+              if (file.getByteAt(offset) != 0xFF) {
+                  if (debug)
+                      console.log("Not a valid marker at offset " + offset + ", found: " + file.getByteAt(offset));
+                  return false; // not a valid marker, something is wrong
+              }
+
+              marker = file.getByteAt(offset + 1);
+
+              // we could implement handling for other markers here,
+              // but we're only looking for 0xFFE1 for EXIF data
+
+              if (marker == 22400) {
+                  if (debug)
+                      console.log("Found 0xFFE1 marker");
+
+                  return readEXIFData(file, offset + 4, file.getShortAt(offset + 2, true) - 2);
+
+                  // offset += 2 + file.getShortAt(offset+2, true);
+
+              } else if (marker == 225) {
+                  // 0xE1 = Application-specific 1 (for EXIF)
+                  if (debug)
+                      console.log("Found 0xFFE1 marker");
+
+                  return readEXIFData(file, offset + 4, file.getShortAt(offset + 2, true) - 2);
+
+              } else {
+                  offset += 2 + file.getShortAt(offset + 2, true);
+              }
+
+          }
+
+      }
+
+
+      function readTags(file, tiffStart, dirStart, strings, bigEnd) {
+          var entries = file.getShortAt(dirStart, bigEnd),
+                  tags = {},
+                  entryOffset, tag,
+                  i;
+
+          for (i = 0; i < entries; i++) {
+              entryOffset = dirStart + i * 12 + 2;
+              tag = strings[file.getShortAt(entryOffset, bigEnd)];
+              if (!tag && debug)
+                  console.log("Unknown tag: " + file.getShortAt(entryOffset, bigEnd));
+              tags[tag] = readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd);
+          }
+          return tags;
+      }
+
+
+      function readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd) {
+          var type = file.getShortAt(entryOffset + 2, bigEnd),
+                  numValues = file.getLongAt(entryOffset + 4, bigEnd),
+                  valueOffset = file.getLongAt(entryOffset + 8, bigEnd) + tiffStart,
+                  offset,
+                  vals, val, n,
+                  numerator, denominator;
+
+          switch (type) {
+              case 1: // byte, 8-bit unsigned int
+              case 7: // undefined, 8-bit byte, value depending on field
+                  if (numValues == 1) {
+                      return file.getByteAt(entryOffset + 8, bigEnd);
+                  } else {
+                      offset = numValues > 4 ? valueOffset : (entryOffset + 8);
+                      vals = [];
+                      for (n = 0; n < numValues; n++) {
+                          vals[n] = file.getByteAt(offset + n);
+                      }
+                      return vals;
+                  }
+
+              case 2: // ascii, 8-bit byte
+                  offset = numValues > 4 ? valueOffset : (entryOffset + 8);
+                  return file.getStringAt(offset, numValues - 1);
+
+              case 3: // short, 16 bit int
+                  if (numValues == 1) {
+                      return file.getShortAt(entryOffset + 8, bigEnd);
+                  } else {
+                      offset = numValues > 2 ? valueOffset : (entryOffset + 8);
+                      vals = [];
+                      for (n = 0; n < numValues; n++) {
+                          vals[n] = file.getShortAt(offset + 2 * n, bigEnd);
+                      }
+                      return vals;
+                  }
+
+              case 4: // long, 32 bit int
+                  if (numValues == 1) {
+                      return file.getLongAt(entryOffset + 8, bigEnd);
+                  } else {
+                      vals = [];
+                      for (var n = 0; n < numValues; n++) {
+                          vals[n] = file.getLongAt(valueOffset + 4 * n, bigEnd);
+                      }
+                      return vals;
+                  }
+
+              case 5: // rational = two long values, first is numerator, second is denominator
+                  if (numValues == 1) {
+                      numerator = file.getLongAt(valueOffset, bigEnd);
+                      denominator = file.getLongAt(valueOffset + 4, bigEnd);
+                      val = new Number(numerator / denominator);
+                      val.numerator = numerator;
+                      val.denominator = denominator;
+                      return val;
+                  } else {
+                      vals = [];
+                      for (n = 0; n < numValues; n++) {
+                          numerator = file.getLongAt(valueOffset + 8 * n, bigEnd);
+                          denominator = file.getLongAt(valueOffset + 4 + 8 * n, bigEnd);
+                          vals[n] = new Number(numerator / denominator);
+                          vals[n].numerator = numerator;
+                          vals[n].denominator = denominator;
+                      }
+                      return vals;
+                  }
+
+              case 9: // slong, 32 bit signed int
+                  if (numValues == 1) {
+                      return file.getSLongAt(entryOffset + 8, bigEnd);
+                  } else {
+                      vals = [];
+                      for (n = 0; n < numValues; n++) {
+                          vals[n] = file.getSLongAt(valueOffset + 4 * n, bigEnd);
+                      }
+                      return vals;
+                  }
+
+              case 10: // signed rational, two slongs, first is numerator, second is denominator
+                  if (numValues == 1) {
+                      return file.getSLongAt(valueOffset, bigEnd) / file.getSLongAt(valueOffset + 4, bigEnd);
+                  } else {
+                      vals = [];
+                      for (n = 0; n < numValues; n++) {
+                          vals[n] = file.getSLongAt(valueOffset + 8 * n, bigEnd) / file.getSLongAt(valueOffset + 4 + 8 * n, bigEnd);
+                      }
+                      return vals;
+                  }
+          }
+      }
+
+
+      function readEXIFData(file, start) {
+          if (file.getStringAt(start, 4) != "Exif") {
+              if (debug)
+                  console.log("Not valid EXIF data! " + file.getStringAt(start, 4));
+              return false;
+          }
+
+          var bigEnd,
+                  tags, tag,
+                  exifData, gpsData,
+                  tiffOffset = start + 6;
+
+          // test for TIFF validity and endianness
+          if (file.getShortAt(tiffOffset) == 0x4949) {
+              bigEnd = false;
+          } else if (file.getShortAt(tiffOffset) == 0x4D4D) {
+              bigEnd = true;
+          } else {
+              if (debug)
+                  console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");
+              return false;
+          }
+
+          if (file.getShortAt(tiffOffset + 2, bigEnd) != 0x002A) {
+              if (debug)
+                  console.log("Not valid TIFF data! (no 0x002A)");
+              return false;
+          }
+
+          if (file.getLongAt(tiffOffset + 4, bigEnd) != 0x00000008) {
+              if (debug)
+                  console.log("Not valid TIFF data! (First offset not 8)", file.getShortAt(tiffOffset + 4, bigEnd));
+              return false;
+          }
+
+          tags = readTags(file, tiffOffset, tiffOffset + 8, TiffTags, bigEnd);
+
+          if (tags.ExifIFDPointer) {
+              exifData = readTags(file, tiffOffset, tiffOffset + tags.ExifIFDPointer, ExifTags, bigEnd);
+              for (tag in exifData) {
+                  switch (tag) {
+                      case "LightSource" :
+                      case "Flash" :
+                      case "MeteringMode" :
+                      case "ExposureProgram" :
+                      case "SensingMethod" :
+                      case "SceneCaptureType" :
+                      case "SceneType" :
+                      case "CustomRendered" :
+                      case "WhiteBalance" :
+                      case "GainControl" :
+                      case "Contrast" :
+                      case "Saturation" :
+                      case "Sharpness" :
+                      case "SubjectDistanceRange" :
+                      case "FileSource" :
+                          exifData[tag] = StringValues[tag][exifData[tag]];
+                          break;
+
+                      case "ExifVersion" :
+                      case "FlashpixVersion" :
+                          exifData[tag] = String.fromCharCode(exifData[tag][0], exifData[tag][1], exifData[tag][2], exifData[tag][3]);
+                          break;
+
+                      case "ComponentsConfiguration" :
+                          exifData[tag] =
+                                  StringValues.Components[exifData[tag][0]]
+                                  + StringValues.Components[exifData[tag][1]]
+                                  + StringValues.Components[exifData[tag][2]]
+                                  + StringValues.Components[exifData[tag][3]];
+                          break;
+                  }
+                  tags[tag] = exifData[tag];
+              }
+          }
+
+          if (tags.GPSInfoIFDPointer) {
+              gpsData = readTags(file, tiffOffset, tiffOffset + tags.GPSInfoIFDPointer, GPSTags, bigEnd);
+              for (tag in gpsData) {
+                  switch (tag) {
+                      case "GPSVersionID" :
+                          gpsData[tag] = gpsData[tag][0]
+                                  + "." + gpsData[tag][1]
+                                  + "." + gpsData[tag][2]
+                                  + "." + gpsData[tag][3];
+                          break;
+                  }
+                  tags[tag] = gpsData[tag];
+              }
+          }
+
+          return tags;
+      }
+
+
+      function getData(img, callback) {
+          if (!img.complete)
+              return false;
+          if (!imageHasData(img)) {
+              getImageData(img, callback);
+          } else {
+              if (callback) {
+                  callback.call(img);
+              }
+          }
+          return true;
+      }
+
+      function getTag(img, tag) {
+          if (!imageHasData(img))
+              return;
+          return img.exifdata[tag];
+      }
+
+      function getAllTags(img) {
+          if (!imageHasData(img))
+              return {};
+          var a,
+                  data = img.exifdata,
+                  tags = {};
+          for (a in data) {
+              if (data.hasOwnProperty(a)) {
+                  tags[a] = data[a];
+              }
+          }
+          return tags;
+      }
+
+      function pretty(img) {
+          if (!imageHasData(img))
+              return "";
+          var a,
+                  data = img.exifdata,
+                  strPretty = "";
+          for (a in data) {
+              if (data.hasOwnProperty(a)) {
+                  if (typeof data[a] == "object") {
+                      if (data[a] instanceof Number) {
+                          strPretty += a + " : " + data[a] + " [" + data[a].numerator + "/" + data[a].denominator + "]\r\n";
+                      } else {
+                          strPretty += a + " : [" + data[a].length + " values]\r\n";
+                      }
+                  } else {
+                      strPretty += a + " : " + data[a] + "\r\n";
+                  }
+              }
+          }
+          return strPretty;
+      }
+
+      function readFromBinaryFile(file) {
+          return findEXIFinJPEG(file);
+      }
+
+
+      return {
+          readFromBinaryFile: readFromBinaryFile,
+          pretty: pretty,
+          getTag: getTag,
+          getAllTags: getAllTags,
+          getData: getData,
+          Tags: ExifTags,
+          TiffTags: TiffTags,
+          GPSTags: GPSTags,
+          StringValues: StringValues
+      };
+
+  })();
+
+  angular.module('ImageCropper',[])
+    .directive('imageCrop', ["$q", function($q) {
+      'ngInject'; // Need for ngAnnotate, before uglify
+
+      return {
+        template: '<div id="image-crop-{{ rand }}" class="ng-image-crop ng-image-crop--{{ shape }}" ng-style="moduleStyles"><section ng-style="sectionStyles" ng-show="step==1"></section><section ng-style="sectionStyles" ng-show="step==2"><canvas class="cropping-canvas" width="{{ canvasWidth }}" height="{{ canvasHeight }}" ng-mousemove="onCanvasMouseMove($event)" ng-mousedown="onCanvasMouseDown($event)"></canvas><div ng-style="croppingGuideStyles" class="cropping-guide"></div><div class="zoom-handle" ng-mousemove="onHandleMouseMove($event)" ng-mousedown="onHandleMouseDown($event)" ng-mouseup="onHandleMouseUp($event)"><span>&larr; zoom &rarr;</span></div></section><section ng-style="sectionStyles" class="image-crop-section-final" ng-show="step==3"><img class="image-crop-final" ng-src="{{ croppedDataUri }}" /></section></div>',
+        replace: true,
+        restrict: 'AE',
+        scope: {
+		  crop: '=',
+          width: '@',
+          height: '@',
+          shape: '@',
+          safeMove: '@',
+          fillColor: '@',
+		  src: '=',
+          resultBlob: '=',
+		  result: '=',
+          step: '=',
+          padding: '@',
+          maxSize: '@',
+          resultFormat: '@'
+        },
+        link: function (scope, element, attributes) {
+		  
+		  var padding = scope.padding ? Number(scope.padding) : 200;
+		  
+          scope.rand = Math.round(Math.random() * 99999);
+          scope.step = scope.step || 1;
+          scope.shape = scope.shape || 'circle';
+          scope.width = parseInt(scope.width, 10) || 300;
+          scope.height = parseInt(scope.height, 10) || 300;
+          scope.resultFormat = scope.resultFormat || 'image/png';
+
+          scope.canvasWidth = scope.width + padding;
+          scope.canvasHeight = scope.height + padding;
+          scope.saveMove = scope.safeMove !== 0 ? scope.safeMove : true;
+
+          var $elm = element[0];
+
+          var $canvas = $elm.getElementsByClassName('cropping-canvas')[0];
+          var $handle = $elm.getElementsByClassName('zoom-handle')[0];
+          var $finalImg = $elm.getElementsByClassName('image-crop-final')[0];
+          var $img = new Image();
+          var fileReader = new FileReader();
+
+          var maxLeft = 0, minLeft = 0, maxTop = 0, minTop = 0, imgLoaded = false, imgWidth = 0, imgHeight = 0;
+          var currentX = 0, currentY = 0, dragging = false, startX = 0, startY = 0, zooming = false;
+          var newWidth = imgWidth, newHeight = imgHeight;
+          var targetX = 0, targetY = 0;
+          var zoom = 1;
+          var maxZoomGestureLength = 0;
+          var maxZoomedInLevel = 0, maxZoomedOutLevel = 2;
+          var minXPos = 0, maxXPos = (padding/2), minYPos = 0, maxYPos = (padding/2); // for dragging bounds		  
+		      var maxSize = scope.maxSize ? Number(scope.maxSize) : null; //max size of the image in px
+		  
+          var zoomWeight = .6;
+          var ctx = $canvas.getContext('2d');
+          var exif = null;
+          var files = [];
+
+          // ---------- INLINE STYLES ----------- //
+          scope.moduleStyles = {
+            width: (scope.width + padding) + 'px',
+            height: (scope.height + padding) + 'px'
+          };
+
+          scope.sectionStyles = {
+            width: (scope.width + padding) + 'px',
+            height: (scope.height + padding) + 'px'
+          };
+
+          scope.croppingGuideStyles = {
+            width: scope.width + 'px',
+            height: scope.height + 'px',
+            top: (padding/2)+'px',
+            left: (padding/2)+'px'
+          };
+  		  
+		  function handleSize(base64ImageSrc) {
+		  
+			return $q(function(resolve, reject) {
+				
+				if(!maxSize) {
+					return resolve(base64ImageSrc);
+				}
+				
+				var img = new Image();
+				img.src = base64ImageSrc;
+				
+				img.onload = function() {
+				
+					var height = img.height;
+					var width = img.width;
+															
+					//if the size is already ok, just return the image
+					if(height <= maxSize && width <= maxSize) {						
+						return resolve(base64ImageSrc);
+					}			 	
+					
+					var ratio = width/height;
+					
+					if(ratio > 1) {
+						width = maxSize;
+						height = maxSize/ratio;
+					}
+					else {
+						width = maxSize*ratio;
+						height = maxSize;
+					}							
+					
+					width = Math.round(width);
+					height = Math.round(height);			 	
+					
+					var canvas = document.createElement("canvas");
+					canvas.width = width;
+					canvas.height = height;			 	
+					
+					var context = canvas.getContext("2d");
+									
+					context.drawImage(img, 0, 0, img.width,    img.height,      // source
+										   0, 0, canvas.width, canvas.height);  // destination	 
+					
+					context.save();
+								
+					var dataUrl = canvas.toDataURL();
+					
+					resolve(dataUrl);
+
+				};
+					
+			});		  
+				
+		  }
+					
+		  function handleEXIF(base64ImageSrc, exif) {
+		  		
+			return $q(function(resolve, reject) {
+								
+				var img = new Image();
+				img.src = base64ImageSrc;
+				
+				img.onload = function() {
+				
+					var canvas = document.createElement("canvas");
+					
+					if(exif.Orientation >= 5) {
+						canvas.width = img.height;
+						canvas.height = img.width;
+					} else {
+						canvas.width = img.width;
+						canvas.height = img.height;
+					}
+					
+					var context = canvas.getContext("2d");
+		
+					// change mobile orientation, if required
+					switch(exif.Orientation){
+						case 1:
+							// nothing
+							break;
+						case 2:
+							// horizontal flip
+							context.translate(img.width, 0);
+							context.scale(-1, 1);
+							break;
+						case 3:
+							// 180 rotate left
+							context.translate(img.width, img.height);
+							context.rotate(Math.PI);
+							break;
+						case 4:
+							// vertical flip
+							context.translate(0, img.height);
+							context.scale(1, -1);
+							break;
+						case 5:
+							// vertical flip + 90 rotate right
+							context.rotate(0.5 * Math.PI);
+							context.scale(1, -1);
+							break;
+						case 6:
+							// 90 rotate right
+							context.rotate(0.5 * Math.PI);
+							context.translate(0, -img.height);
+							break;
+						case 7:
+							// horizontal flip + 90 rotate right
+							context.rotate(0.5 * Math.PI);
+							context.translate(img.width, -img.height);
+							context.scale(-1, 1);
+							break;
+						case 8:
+							// 90 rotate left					 		                   
+							context.rotate(-0.5 * Math.PI);
+							context.translate(-img.width, 0);
+							break;
+						default:
+							break;
+					}
+					
+					context.drawImage(img, 0, 0);	
+					context.save();
+					
+					var dataUrl = canvas.toDataURL();
+					
+					resolve(dataUrl);										
+				
+				};
+				
+			});				
+				
+		  }
+		  
+		  function loadImage(base64ImageSrc) {
+		  
+			  //get the EXIF information from the image
+        var byteString = atob(base64ImageSrc.split(',')[1]);
+        var binary = new BinaryFile(byteString, 0, byteString.length);
+        exif = EXIF.readFromBinaryFile(binary);
+           
+		    //handle image size
+        handleSize(base64ImageSrc).then(function(base64ImageSrc) {
+			
+          //if the image has EXIF orientation..
+          if (exif && exif.Orientation && exif.Orientation > 1) {
+            return handleEXIF(base64ImageSrc, exif);
+          }
+          //otherwise, just return the image without any treatment
+          else {
+            return base64ImageSrc;
+          }
+
+        }).then(function(base64ImageSrc) {
+
+          $img.src = base64ImageSrc;
+
+        }).catch(function(error) {
+          console.log(error);
+        });
+		  }
+		  
+      // ---------- EVENT HANDLERS ---------- //
+      fileReader.onload = function(e) {
+
+        loadImage(this.resultBlob);
+
+      };
+
+      $img.onload = function() {
+		  
+			scope.step = 2;
+			scope.$apply();		  
+			
+      ctx = redraw(ctx, $img, 0, 0);
+
+      imgWidth = $img.width;
+      imgHeight = $img.height;
+
+      minLeft = (scope.width + padding) - this.width;
+      minTop = (scope.height + padding) - this.height;
+      newWidth = imgWidth;
+      newHeight = imgHeight;
+            
+			if(imgWidth >= imgHeight) {
+				maxZoomedInLevel = ($canvas.height - padding) / imgHeight;
+			} else {
+				maxZoomedInLevel = ($canvas.width - padding) / imgWidth;
+			}		
+
+      maxZoomGestureLength = to2Dp(Math.sqrt(Math.pow($canvas.width, 2) + Math.pow($canvas.height, 2)));
+
+      updateDragBounds();
+			
+			var initialX = Math.round((minXPos + maxXPos)/2);
+			var initialY = Math.round((minYPos + maxYPos)/2);
+						
+			moveImage(initialX, initialY);
+			
+    };
+		  
+    function reset() {
+      files = [];
+      zoom = 1;
+      currentX = 0;
+      currentY = 0;
+      dragging = false;
+      startX = 0;
+      startY = 0;
+      zooming = false;
+      ctx.clearRect(0, 0, $canvas.width, $canvas.height);
+      $img.src = '';
+    }
+
+      // ---------- PRIVATE FUNCTIONS ---------- //
+      function moveImage(x, y) {
+        if (scope.safeMove === "true") {
+          x = x < minXPos ? minXPos : x;
+          x = x > maxXPos ? maxXPos : x;
+          y = y < minYPos ? minYPos : y;
+          y = y > maxYPos ? maxYPos : y;
+        }
+
+        targetX = x;
+        targetY = y;
+
+        ctx = redraw(ctx, $img, x, y, newWidth, newHeight);
+        // return x == minXPos || x == maxXPos || y == minYPos || y == maxYPos;
+      }
+
+      function redraw(canvas, $img, x, y, newWidth, newHeight) {
+        ctx.clearRect(0, 0, $canvas.width, $canvas.height);
+        if (scope.fillColor !== undefined) {
+          ctx.fillStyle = scope.fillColor;
+          ctx.fillRect(0, 0, $canvas.width, $canvas.height);
+        }
+
+        ctx.drawImage($img, x, y, newWidth, newHeight);
+        return ctx;
+      }
+
+      function to2Dp(val) {
+        return Math.round(val * 1000) / 1000;
+      }
+
+      function updateDragBounds() {
+        // $img.width, $canvas.width, zoom
+
+        minXPos = $canvas.width - ($img.width * zoom) - (padding/2);
+        minYPos = $canvas.height - ($img.height * zoom) - (padding/2);
+
+      }
+
+      function zoomImage(val) {
+
+        if (!val) {
+          return;
+        }
+
+        var proposedZoomLevel = to2Dp(zoom + val);
+
+        if ((proposedZoomLevel < maxZoomedInLevel) || (proposedZoomLevel > maxZoomedOutLevel)) {
+          // image wont fill whole canvas
+          // or image is too far zoomed in, it's gonna get pretty pixelated!
+          return;
+        }
+
+        zoom = proposedZoomLevel;
+        // console.log('zoom', zoom);
+
+        updateDragBounds();
+
+        newWidth = $img.width * zoom;
+        newHeight = $img.height * zoom;
+
+        var newXPos = currentX * zoom;
+        var newYPos = currentY * zoom;
+
+        // check if we've exposed the gutter
+        if (newXPos < minXPos) {
+          newXPos = minXPos;
+        } else if (newXPos > maxXPos) {
+          newXPos = maxXPos;
+        }
+
+        if (newYPos < minYPos) {
+          newYPos = minYPos;
+        } else if (newYPos > maxYPos) {
+          newYPos = maxYPos;
+        }
+
+        // check if image is still going to fit the bounds of the box
+        ctx = redraw(ctx, $img, newXPos, newYPos, newWidth, newHeight);
+      }
+
+      function calcZoomLevel(diffX, diffY) {
+
+        var hyp = Math.sqrt( Math.pow(diffX, 2) + Math.pow(diffY, 2) );
+        var zoomGestureRatio = to2Dp(hyp / maxZoomGestureLength);
+        var newZoomDiff = to2Dp((maxZoomedOutLevel - maxZoomedInLevel) * zoomGestureRatio * zoomWeight);
+        return diffX > 0 ? -newZoomDiff : newZoomDiff;
+
+      }
+          
+		  function dataURItoBlob(dataURI) {
+			    var byteString, 
+			        mimestring;
+			
+			    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
+			        byteString = atob(dataURI.split(',')[1]);
+			    } else {
+			        byteString = decodeURI(dataURI.split(',')[1]);
+			    }
+			
+			    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0];
+			
+			    var content = new Array();
+			    for (var i = 0; i < byteString.length; i++) {
+			        content[i] = byteString.charCodeAt(i);
+			    }
+			
+			    return new Blob([new Uint8Array(content)], {type: mimestring});
+		  }       
+
+          // ---------- SCOPE FUNCTIONS ---------- //
+
+		  scope.$watch('src', function(){
+          if(scope.src) {
+            if(scope.step != 3) {
+              if(typeof(scope.src) === 'Blob') {
+                fileReader.readAsDataURL(scope.src);
+              } else {
+                loadImage(scope.src);
+              }
+            }
+          } else {
+            scope.step = 1;
+            reset();
+          }
+		  });	
+
+		  scope.$watch('crop',function(){
+			if(scope.crop) {
+				scope.doCrop();
+				scope.crop = false;
+			}
+		  });	
+		  
+          $finalImg.onload = function() {			
+            var tempCanvas = document.createElement('canvas');
+            tempCanvas.width = this.width - padding;
+            tempCanvas.height = this.height - padding;
+            tempCanvas.style.display = 'none';
+
+            var tempCanvasContext = tempCanvas.getContext('2d');
+            tempCanvasContext.drawImage($finalImg, -(padding/2), -(padding/2));
+
+            $elm.getElementsByClassName('image-crop-section-final')[0].appendChild(tempCanvas);
+			
+			      var dataUrl = tempCanvas.toDataURL(scope.resultFormat);
+			
+			      scope.result = dataUrl;
+            scope.resultBlob = dataURItoBlob(dataUrl);
+            
+            scope.$apply();
+          };
+
+          scope.doCrop = function() {
+            scope.croppedDataUri = $canvas.toDataURL(scope.resultFormat);
+            scope.step = 3;
+          };
+
+          scope.onCanvasMouseUp = function(e) {
+
+            if (!dragging) {
+              return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation(); // if event was on canvas, stop it propagating up
+
+            startX = 0;
+            startY = 0;
+            dragging = false;
+            currentX = targetX;
+            currentY = targetY;
+
+            removeBodyEventListener('mouseup', scope.onCanvasMouseUp);
+            removeBodyEventListener('touchend', scope.onCanvasMouseUp);
+            removeBodyEventListener('mousemove', scope.onCanvasMouseMove);
+            removeBodyEventListener('touchmove', scope.onCanvasMouseMove);
+          };
+
+          $canvas.addEventListener('touchend', scope.onCanvasMouseUp, false);
+
+          scope.onCanvasMouseDown = function(e) {
+            startX = e.type === 'touchstart' ? e.changedTouches[0].clientX : e.clientX;
+            startY = e.type === 'touchstart' ? e.changedTouches[0].clientY : e.clientY;
+            zooming = false;
+            dragging = true;
+
+            addBodyEventListener('mouseup', scope.onCanvasMouseUp);
+            addBodyEventListener('mousemove', scope.onCanvasMouseMove);
+          };
+
+          $canvas.addEventListener('touchstart', scope.onCanvasMouseDown, false);
+
+          function addBodyEventListener(eventName, func) {
+            document.documentElement.addEventListener(eventName, func, false);
+          }
+
+          function removeBodyEventListener(eventName, func) {
+            document.documentElement.removeEventListener(eventName, func);
+          }
+
+          scope.onHandleMouseDown = function(e) {
+
+            e.preventDefault();
+            e.stopPropagation(); // if event was on handle, stop it propagating up
+
+            startX = lastHandleX = (e.type === 'touchstart') ? e.changedTouches[0].clientX : e.clientX;
+            startY = lastHandleY = (e.type === 'touchstart') ? e.changedTouches[0].clientY : e.clientY;
+            dragging = false;
+            zooming = true;
+
+            addBodyEventListener('mouseup', scope.onHandleMouseUp);
+            addBodyEventListener('touchend', scope.onHandleMouseUp);
+            addBodyEventListener('mousemove', scope.onHandleMouseMove);
+            addBodyEventListener('touchmove', scope.onHandleMouseMove);
+			
+          };
+
+          $handle.addEventListener('touchstart', scope.onHandleMouseDown, false);
+
+          scope.onHandleMouseUp = function(e) {
+
+            // this is applied on the whole section so check we're zooming
+            if (!zooming) {
+              return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation(); // if event was on canvas, stop it propagating up
+
+            startX = 0;
+            startY = 0;
+            zooming = false;
+            currentX = targetX;
+            currentY = targetY;
+
+            removeBodyEventListener('mouseup', scope.onHandleMouseUp);
+            removeBodyEventListener('touchend', scope.onHandleMouseUp);
+            removeBodyEventListener('mousemove', scope.onHandleMouseMove);
+            removeBodyEventListener('touchmove', scope.onHandleMouseMove);
+          };
+
+          $handle.addEventListener('touchend', scope.onHandleMouseUp, false);
+
+          scope.onCanvasMouseMove = function(e) {
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (!dragging) {
+              return;
+            }
+
+            var diffX = startX - ((e.type === 'touchmove') ? e.changedTouches[0].clientX : e.clientX); // how far mouse has moved in current drag
+            var diffY = startY - ((e.type === 'touchmove') ? e.changedTouches[0].clientY : e.clientY); // how far mouse has moved in current drag
+            /*targetX = currentX - diffX; // desired new X position
+            targetY = currentY - diffY; // desired new X position*/
+
+            moveImage(currentX - diffX, currentY - diffY);
+
+          };
+
+          $canvas.addEventListener('touchmove', scope.onCanvasMouseMove, false);
+
+          var lastHandleX = null, lastHandleY = null;
+
+          scope.onHandleMouseMove = function(e) {
+
+            e.stopPropagation();
+            e.preventDefault();
+
+            // this is applied on the whole section so check we're zooming
+            if (!zooming) {
+              return false;
+            }
+
+            var diffX = lastHandleX - ((e.type === 'touchmove') ? e.changedTouches[0].clientX : e.clientX); // how far mouse has moved in current drag
+            var diffY = lastHandleY - ((e.type === 'touchmove') ? e.changedTouches[0].clientY : e.clientY); // how far mouse has moved in current drag
+
+            lastHandleX = (e.type === 'touchmove') ? e.changedTouches[0].clientX : e.clientX;
+            lastHandleY = (e.type === 'touchmove') ? e.changedTouches[0].clientY : e.clientY;
+
+            var zoomVal = calcZoomLevel(diffX, diffY);			
+            zoomImage(zoomVal);
+
+          };
+
+          $handle.addEventListener('touchmove', scope.onHandleMouseMove, false);	  		 
+		  	  		  
+		  scope.onHandleMouseWheel = function(e){
+			  e.preventDefault();		  
+			  
+			  zoomImage(e.deltaY > 0 ? -0.05 : 0.05);			  
+		  };
+
+		  $canvas.addEventListener('mousewheel', scope.onHandleMouseWheel);
+		  $handle.addEventListener('mousewheel', scope.onHandleMouseWheel);
+
+        }
+      };
+    }]);
+
+
+})();
diff --git a/dist/angular-image-crop.min.css b/dist/angular-image-crop.min.css
new file mode 100644
index 0000000..9b0c198
--- /dev/null
+++ b/dist/angular-image-crop.min.css
@@ -0,0 +1 @@
+.ng-image-crop{text-align:center;margin:0 auto;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.ng-image-crop>section{background:#ccc}.ng-image-crop button{margin-top:10px}.ng-image-crop .cropping-guide{display:block;background:rgba(255,255,255,0.3);border:2px dashed white;position:absolute;pointer-events:none}.ng-image-crop .cropping-canvas{background:rgba(255,255,255,0.3);margin:0 auto;cursor:move}.ng-image-crop .zoom-handle{display:block;position:absolute;bottom:1px;left:1px;background:rgba(255,255,255,0.7);width:80px;height:80px;cursor:move;border-radius:200px 50px}.ng-image-crop .zoom-handle>span{color:rgba(0,0,0,0.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:block;position:relative;top:32px}.ng-image-crop--circle .cropping-guide{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}
\ No newline at end of file
diff --git a/dist/angular-image-crop.min.js b/dist/angular-image-crop.min.js
new file mode 100644
index 0000000..1d00f86
--- /dev/null
+++ b/dist/angular-image-crop.min.js
@@ -0,0 +1,2 @@
+/* AngularJS Directive - angular-image-crop v2.0.2 (minified) - license MIT */
+function BinaryFile(e,t,n){var r=e,a=t||0,o=0;this.getRawData=function(){return r},"string"==typeof e?(o=n||r.length,this.getByteAt=function(e){return 255&r.charCodeAt(e+a)},this.getBytesAt=function(e,t){for(var n=[],o=0;o<t;o++)n[o]=255&r.charCodeAt(e+o+a);return n}):"unknown"==typeof e&&(o=n||IEBinary_getLength(r),this.getByteAt=function(e){return IEBinary_getByteAt(r,e+a)},this.getBytesAt=function(e,t){return new VBArray(IEBinary_getBytesAt(r,e+a,t)).toArray()}),this.getLength=function(){return o},this.getSByteAt=function(e){var t=this.getByteAt(e);return 127<t?t-256:t},this.getShortAt=function(e,t){var n=t?(this.getByteAt(e)<<8)+this.getByteAt(e+1):(this.getByteAt(e+1)<<8)+this.getByteAt(e);return n<0&&(n+=65536),n},this.getSShortAt=function(e,t){var n=this.getShortAt(e,t);return 32767<n?n-65536:n},this.getLongAt=function(e,t){var n=this.getByteAt(e),o=this.getByteAt(e+1),r=this.getByteAt(e+2),a=this.getByteAt(e+3),i=t?(((n<<8)+o<<8)+r<<8)+a:(((a<<8)+r<<8)+o<<8)+n;return i<0&&(i+=4294967296),i},this.getSLongAt=function(e,t){var n=this.getLongAt(e,t);return 2147483647<n?n-4294967296:n},this.getStringAt=function(e,t){for(var n=[],o=this.getBytesAt(e,t),r=0;r<t;r++)n[r]=String.fromCharCode(o[r]);return n.join("")},this.getCharAt=function(e){return String.fromCharCode(this.getByteAt(e))},this.toBase64=function(){return window.btoa(r)},this.fromBase64=function(e){r=window.atob(e)}}function r(e){return e.exifdata}function a(e){if(255!=e.getByteAt(0)||216!=e.getByteAt(1))return!1;for(var t,n=2,o=e.getLength();n<o;){if(255!=e.getByteAt(n))return l&&console.log("Not a valid marker at offset "+n+", found: "+e.getByteAt(n)),!1;if(22400==(t=e.getByteAt(n+1)))return l&&console.log("Found 0xFFE1 marker"),i(e,n+4,e.getShortAt(n+2,!0));if(225==t)return l&&console.log("Found 0xFFE1 marker"),i(e,n+4,e.getShortAt(n+2,!0));n+=2+e.getShortAt(n+2,!0)}}function u(e,t,n,o,r){var a,i,s,u=e.getShortAt(n,r),c={};for(s=0;s<u;s++)a=n+12*s+2,!(i=o[e.getShortAt(a,r)])&&l&&console.log("Unknown tag: "+e.getShortAt(a,r)),c[i]=h(e,a,t,0,r);return c}function h(e,t,n,o,r){var a,i,s,u,c,h=e.getShortAt(t+2,r),l=e.getLongAt(t+4,r),d=e.getLongAt(t+8,r)+n;switch(h){case 1:case 7:if(1==l)return e.getByteAt(t+8,r);for(a=4<l?d:t+8,i=[],g=0;g<l;g++)i[g]=e.getByteAt(a+g);return i;case 2:return a=4<l?d:t+8,e.getStringAt(a,l-1);case 3:if(1==l)return e.getShortAt(t+8,r);for(a=2<l?d:t+8,i=[],g=0;g<l;g++)i[g]=e.getShortAt(a+2*g,r);return i;case 4:if(1==l)return e.getLongAt(t+8,r);i=[];for(var g=0;g<l;g++)i[g]=e.getLongAt(d+4*g,r);return i;case 5:if(1==l)return u=e.getLongAt(d,r),c=e.getLongAt(d+4,r),(s=new Number(u/c)).numerator=u,s.denominator=c,s;for(i=[],g=0;g<l;g++)u=e.getLongAt(d+8*g,r),c=e.getLongAt(d+4+8*g,r),i[g]=new Number(u/c),i[g].numerator=u,i[g].denominator=c;return i;case 9:if(1==l)return e.getSLongAt(t+8,r);for(i=[],g=0;g<l;g++)i[g]=e.getSLongAt(d+4*g,r);return i;case 10:if(1==l)return e.getSLongAt(d,r)/e.getSLongAt(d+4,r);for(i=[],g=0;g<l;g++)i[g]=e.getSLongAt(d+8*g,r)/e.getSLongAt(d+4+8*g,r);return i}}function i(e,t){if("Exif"!=e.getStringAt(t,4))return l&&console.log("Not valid EXIF data! "+e.getStringAt(t,4)),!1;var n,o,r,a,i,s=t+6;if(18761==e.getShortAt(s))n=!1;else{if(19789!=e.getShortAt(s))return l&&console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)"),!1;n=!0}if(42!=e.getShortAt(s+2,n))return l&&console.log("Not valid TIFF data! (no 0x002A)"),!1;if(8!=e.getLongAt(s+4,n))return l&&console.log("Not valid TIFF data! (First offset not 8)",e.getShortAt(s+4,n)),!1;if((o=u(e,s,s+8,d,n)).ExifIFDPointer)for(r in a=u(e,s,s+o.ExifIFDPointer,c,n)){switch(r){case"LightSource":case"Flash":case"MeteringMode":case"ExposureProgram":case"SensingMethod":case"SceneCaptureType":case"SceneType":case"CustomRendered":case"WhiteBalance":case"GainControl":case"Contrast":case"Saturation":case"Sharpness":case"SubjectDistanceRange":case"FileSource":a[r]=p[r][a[r]];break;case"ExifVersion":case"FlashpixVersion":a[r]=String.fromCharCode(a[r][0],a[r][1],a[r][2],a[r][3]);break;case"ComponentsConfiguration":a[r]=p.Components[a[r][0]]+p.Components[a[r][1]]+p.Components[a[r][2]]+p.Components[a[r][3]]}o[r]=a[r]}if(o.GPSInfoIFDPointer)for(r in i=u(e,s,s+o.GPSInfoIFDPointer,g,n)){switch(r){case"GPSVersionID":i[r]=i[r][0]+"."+i[r][1]+"."+i[r][2]+"."+i[r][3]}o[r]=i[r]}return o}var l,c,d,g,p,EXIF;l=!1,EXIF={readFromBinaryFile:function(e){return a(e)},pretty:function(e){if(!r(e))return"";var t,n=e.exifdata,o="";for(t in n)n.hasOwnProperty(t)&&("object"==typeof n[t]?n[t]instanceof Number?o+=t+" : "+n[t]+" ["+n[t].numerator+"/"+n[t].denominator+"]\r\n":o+=t+" : ["+n[t].length+" values]\r\n":o+=t+" : "+n[t]+"\r\n");return o},getTag:function(e,t){if(r(e))return e.exifdata[t]},getAllTags:function(e){if(!r(e))return{};var t,n=e.exifdata,o={};for(t in n)n.hasOwnProperty(t)&&(o[t]=n[t]);return o},getData:function(e,t){return!!e.complete&&(r(e)?t&&t.call(e):(n=e,o=t,BinaryAjax(n.src,function(e){var t=a(e.binaryResponse);n.exifdata=t||{},o&&o.call(n)})),!0);var n,o},Tags:c={36864:"ExifVersion",40960:"FlashpixVersion",40961:"ColorSpace",40962:"PixelXDimension",40963:"PixelYDimension",37121:"ComponentsConfiguration",37122:"CompressedBitsPerPixel",37500:"MakerNote",37510:"UserComment",40964:"RelatedSoundFile",36867:"DateTimeOriginal",36868:"DateTimeDigitized",37520:"SubsecTime",37521:"SubsecTimeOriginal",37522:"SubsecTimeDigitized",33434:"ExposureTime",33437:"FNumber",34850:"ExposureProgram",34852:"SpectralSensitivity",34855:"ISOSpeedRatings",34856:"OECF",37377:"ShutterSpeedValue",37378:"ApertureValue",37379:"BrightnessValue",37380:"ExposureBias",37381:"MaxApertureValue",37382:"SubjectDistance",37383:"MeteringMode",37384:"LightSource",37385:"Flash",37396:"SubjectArea",37386:"FocalLength",41483:"FlashEnergy",41484:"SpatialFrequencyResponse",41486:"FocalPlaneXResolution",41487:"FocalPlaneYResolution",41488:"FocalPlaneResolutionUnit",41492:"SubjectLocation",41493:"ExposureIndex",41495:"SensingMethod",41728:"FileSource",41729:"SceneType",41730:"CFAPattern",41985:"CustomRendered",41986:"ExposureMode",41987:"WhiteBalance",41988:"DigitalZoomRation",41989:"FocalLengthIn35mmFilm",41990:"SceneCaptureType",41991:"GainControl",41992:"Contrast",41993:"Saturation",41994:"Sharpness",41995:"DeviceSettingDescription",41996:"SubjectDistanceRange",40965:"InteroperabilityIFDPointer",42016:"ImageUniqueID"},TiffTags:d={256:"ImageWidth",257:"ImageHeight",34665:"ExifIFDPointer",34853:"GPSInfoIFDPointer",40965:"InteroperabilityIFDPointer",258:"BitsPerSample",259:"Compression",262:"PhotometricInterpretation",274:"Orientation",277:"SamplesPerPixel",284:"PlanarConfiguration",530:"YCbCrSubSampling",531:"YCbCrPositioning",282:"XResolution",283:"YResolution",296:"ResolutionUnit",273:"StripOffsets",278:"RowsPerStrip",279:"StripByteCounts",513:"JPEGInterchangeFormat",514:"JPEGInterchangeFormatLength",301:"TransferFunction",318:"WhitePoint",319:"PrimaryChromaticities",529:"YCbCrCoefficients",532:"ReferenceBlackWhite",306:"DateTime",270:"ImageDescription",271:"Make",272:"Model",305:"Software",315:"Artist",33432:"Copyright"},GPSTags:g={0:"GPSVersionID",1:"GPSLatitudeRef",2:"GPSLatitude",3:"GPSLongitudeRef",4:"GPSLongitude",5:"GPSAltitudeRef",6:"GPSAltitude",7:"GPSTimeStamp",8:"GPSSatellites",9:"GPSStatus",10:"GPSMeasureMode",11:"GPSDOP",12:"GPSSpeedRef",13:"GPSSpeed",14:"GPSTrackRef",15:"GPSTrack",16:"GPSImgDirectionRef",17:"GPSImgDirection",18:"GPSMapDatum",19:"GPSDestLatitudeRef",20:"GPSDestLatitude",21:"GPSDestLongitudeRef",22:"GPSDestLongitude",23:"GPSDestBearingRef",24:"GPSDestBearing",25:"GPSDestDistanceRef",26:"GPSDestDistance",27:"GPSProcessingMethod",28:"GPSAreaInformation",29:"GPSDateStamp",30:"GPSDifferential"},StringValues:p={ExposureProgram:{0:"Not defined",1:"Manual",2:"Normal program",3:"Aperture priority",4:"Shutter priority",5:"Creative program",6:"Action program",7:"Portrait mode",8:"Landscape mode"},MeteringMode:{0:"Unknown",1:"Average",2:"CenterWeightedAverage",3:"Spot",4:"MultiSpot",5:"Pattern",6:"Partial",255:"Other"},LightSource:{0:"Unknown",1:"Daylight",2:"Fluorescent",3:"Tungsten (incandescent light)",4:"Flash",9:"Fine weather",10:"Cloudy weather",11:"Shade",12:"Daylight fluorescent (D 5700 - 7100K)",13:"Day white fluorescent (N 4600 - 5400K)",14:"Cool white fluorescent (W 3900 - 4500K)",15:"White fluorescent (WW 3200 - 3700K)",17:"Standard light A",18:"Standard light B",19:"Standard light C",20:"D55",21:"D65",22:"D75",23:"D50",24:"ISO studio tungsten",255:"Other"},Flash:{0:"Flash did not fire",1:"Flash fired",5:"Strobe return light not detected",7:"Strobe return light detected",9:"Flash fired, compulsory flash mode",13:"Flash fired, compulsory flash mode, return light not detected",15:"Flash fired, compulsory flash mode, return light detected",16:"Flash did not fire, compulsory flash mode",24:"Flash did not fire, auto mode",25:"Flash fired, auto mode",29:"Flash fired, auto mode, return light not detected",31:"Flash fired, auto mode, return light detected",32:"No flash function",65:"Flash fired, red-eye reduction mode",69:"Flash fired, red-eye reduction mode, return light not detected",71:"Flash fired, red-eye reduction mode, return light detected",73:"Flash fired, compulsory flash mode, red-eye reduction mode",77:"Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",79:"Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",89:"Flash fired, auto mode, red-eye reduction mode",93:"Flash fired, auto mode, return light not detected, red-eye reduction mode",95:"Flash fired, auto mode, return light detected, red-eye reduction mode"},SensingMethod:{1:"Not defined",2:"One-chip color area sensor",3:"Two-chip color area sensor",4:"Three-chip color area sensor",5:"Color sequential area sensor",7:"Trilinear sensor",8:"Color sequential linear sensor"},SceneCaptureType:{0:"Standard",1:"Landscape",2:"Portrait",3:"Night scene"},SceneType:{1:"Directly photographed"},CustomRendered:{0:"Normal process",1:"Custom process"},WhiteBalance:{0:"Auto white balance",1:"Manual white balance"},GainControl:{0:"None",1:"Low gain up",2:"High gain up",3:"Low gain down",4:"High gain down"},Contrast:{0:"Normal",1:"Soft",2:"Hard"},Saturation:{0:"Normal",1:"Low saturation",2:"High saturation"},Sharpness:{0:"Normal",1:"Soft",2:"Hard"},SubjectDistanceRange:{0:"Unknown",1:"Macro",2:"Close view",3:"Distant view"},FileSource:{3:"DSC"},Components:{0:"",1:"Y",2:"Cb",3:"Cr",4:"R",5:"G",6:"B"}}},angular.module("ImageCropper",[]).directive("imageCrop",["$q",function(W){return{template:'<div id="image-crop-{{ rand }}" class="ng-image-crop ng-image-crop--{{ shape }}" ng-style="moduleStyles"><section ng-style="sectionStyles" ng-show="step==1"></section><section ng-style="sectionStyles" ng-show="step==2"><canvas class="cropping-canvas" width="{{ canvasWidth }}" height="{{ canvasHeight }}" ng-mousemove="onCanvasMouseMove($event)" ng-mousedown="onCanvasMouseDown($event)"></canvas><div ng-style="croppingGuideStyles" class="cropping-guide"></div><div class="zoom-handle" ng-mousemove="onHandleMouseMove($event)" ng-mousedown="onHandleMouseDown($event)" ng-mouseup="onHandleMouseUp($event)"><span>&larr; zoom &rarr;</span></div></section><section ng-style="sectionStyles" class="image-crop-section-final" ng-show="step==3"><img class="image-crop-final" ng-src="{{ croppedDataUri }}" /></section></div>',replace:!0,restrict:"AE",scope:{crop:"=",width:"@",height:"@",shape:"@",safeMove:"@",fillColor:"@",src:"=",resultBlob:"=",result:"=",step:"=",padding:"@",maxSize:"@",resultFormat:"@"},link:function(i,e,t){var n=i.padding?Number(i.padding):200;i.rand=Math.round(99999*Math.random()),i.step=i.step||1,i.shape=i.shape||"circle",i.width=parseInt(i.width,10)||300,i.height=parseInt(i.height,10)||300,i.resultFormat=i.resultFormat||"image/png",i.canvasWidth=i.width+n,i.canvasHeight=i.height+n,i.saveMove=0===i.safeMove||i.safeMove;var o=e[0],s=o.getElementsByClassName("cropping-canvas")[0],r=o.getElementsByClassName("zoom-handle")[0],a=o.getElementsByClassName("image-crop-final")[0],c=new Image,u=new FileReader,h=0,l=0,d=0,g=0,p=!1,f=0,m=0,S=!1,v=h,y=l,w=0,M=0,A=1,C=0,P=0,F=0,D=n/2,B=0,L=n/2,I=i.maxSize?Number(i.maxSize):null,x=s.getContext("2d"),b=null;function G(e){var u,t=atob(e.split(",")[1]),n=new BinaryFile(t,0,t.length);b=EXIF.readFromBinaryFile(n),u=e,W(function(i,e){if(!I)return i(u);var s=new Image;s.src=u,s.onload=function(){var e=s.height,t=s.width;if(e<=I&&t<=I)return i(u);var n=t/e;e=1<n?(t=I)/n:(t=I*n,I),t=Math.round(t),e=Math.round(e);var o=document.createElement("canvas");o.width=t,o.height=e;var r=o.getContext("2d");r.drawImage(s,0,0,s.width,s.height,0,0,o.width,o.height),r.save();var a=o.toDataURL();i(a)}}).then(function(e){return b&&b.Orientation&&1<b.Orientation?(t=e,a=b,W(function(o,e){var r=new Image;r.src=t,r.onload=function(){var e=document.createElement("canvas");5<=a.Orientation?(e.width=r.height,e.height=r.width):(e.width=r.width,e.height=r.height);var t=e.getContext("2d");switch(a.Orientation){case 1:break;case 2:t.translate(r.width,0),t.scale(-1,1);break;case 3:t.translate(r.width,r.height),t.rotate(Math.PI);break;case 4:t.translate(0,r.height),t.scale(1,-1);break;case 5:t.rotate(.5*Math.PI),t.scale(1,-1);break;case 6:t.rotate(.5*Math.PI),t.translate(0,-r.height);break;case 7:t.rotate(.5*Math.PI),t.translate(r.width,-r.height),t.scale(-1,1);break;case 8:t.rotate(-.5*Math.PI),t.translate(-r.width,0)}t.drawImage(r,0,0),t.save();var n=e.toDataURL();o(n)}})):e;var t,a}).then(function(e){c.src=e}).catch(function(e){console.log(e)})}function E(e,t){"true"===i.safeMove&&(e=D<(e=e<F?F:e)?D:e,t=L<(t=t<B?B:t)?L:t),x=R(0,c,w=e,M=t,v,y)}function R(e,t,n,o,r,a){return x.clearRect(0,0,s.width,s.height),void 0!==i.fillColor&&(x.fillStyle=i.fillColor,x.fillRect(0,0,s.width,s.height)),x.drawImage(t,n,o,r,a),x}function T(e){return Math.round(1e3*e)/1e3}function U(){F=s.width-c.width*A-n/2,B=s.height-c.height*A-n/2}function H(e){if(e){var t=T(A+e);if(!(t<P||2<t)){A=t,U(),v=c.width*A,y=c.height*A;var n=d*A,o=g*A;n<F?n=F:D<n&&(n=D),o<B?o=B:L<o&&(o=L),x=R(0,c,n,o,v,y)}}}function N(e,t){document.documentElement.addEventListener(e,t,!1)}function k(e,t){document.documentElement.removeEventListener(e,t)}i.moduleStyles={width:i.width+n+"px",height:i.height+n+"px"},i.sectionStyles={width:i.width+n+"px",height:i.height+n+"px"},i.croppingGuideStyles={width:i.width+"px",height:i.height+"px",top:n/2+"px",left:n/2+"px"},u.onload=function(e){G(this.resultBlob)},c.onload=function(){i.step=2,i.$apply(),x=R(0,c,0,0),h=c.width,l=c.height,i.width,this.width,i.height,this.height,P=(y=l)<=(v=h)?(s.height-n)/l:(s.width-n)/h,C=T(Math.sqrt(Math.pow(s.width,2)+Math.pow(s.height,2))),U(),E(Math.round((F+D)/2),Math.round((B+L)/2))},i.$watch("src",function(){i.src?3!=i.step&&("Blob"==typeof i.src?u.readAsDataURL(i.src):G(i.src)):(i.step=1,m=f=g=d=0,S=p=!(A=1),x.clearRect(0,0,s.width,s.height),c.src="")}),i.$watch("crop",function(){i.crop&&(i.doCrop(),i.crop=!1)}),a.onload=function(){var e=document.createElement("canvas");e.width=this.width-n,e.height=this.height-n,e.style.display="none",e.getContext("2d").drawImage(a,-n/2,-n/2),o.getElementsByClassName("image-crop-section-final")[0].appendChild(e);var t=e.toDataURL(i.resultFormat);i.result=t,i.resultBlob=function(e){var t,n;t=(-1!==e.split(",")[0].indexOf("base64")?atob:decodeURI)(e.split(",")[1]),n=e.split(",")[0].split(":")[1].split(";")[0];for(var o=new Array,r=0;r<t.length;r++)o[r]=t.charCodeAt(r);return new Blob([new Uint8Array(o)],{type:n})}(t),i.$apply()},i.doCrop=function(){i.croppedDataUri=s.toDataURL(i.resultFormat),i.step=3},i.onCanvasMouseUp=function(e){p&&(e.preventDefault(),e.stopPropagation(),m=f=0,p=!1,d=w,g=M,k("mouseup",i.onCanvasMouseUp),k("touchend",i.onCanvasMouseUp),k("mousemove",i.onCanvasMouseMove),k("touchmove",i.onCanvasMouseMove))},s.addEventListener("touchend",i.onCanvasMouseUp,!1),i.onCanvasMouseDown=function(e){f="touchstart"===e.type?e.changedTouches[0].clientX:e.clientX,m="touchstart"===e.type?e.changedTouches[0].clientY:e.clientY,p=!(S=!1),N("mouseup",i.onCanvasMouseUp),N("mousemove",i.onCanvasMouseMove)},s.addEventListener("touchstart",i.onCanvasMouseDown,!1),i.onHandleMouseDown=function(e){e.preventDefault(),e.stopPropagation(),f=O="touchstart"===e.type?e.changedTouches[0].clientX:e.clientX,m=Y="touchstart"===e.type?e.changedTouches[0].clientY:e.clientY,S=!(p=!1),N("mouseup",i.onHandleMouseUp),N("touchend",i.onHandleMouseUp),N("mousemove",i.onHandleMouseMove),N("touchmove",i.onHandleMouseMove)},r.addEventListener("touchstart",i.onHandleMouseDown,!1),i.onHandleMouseUp=function(e){S&&(e.preventDefault(),e.stopPropagation(),m=f=0,S=!1,d=w,g=M,k("mouseup",i.onHandleMouseUp),k("touchend",i.onHandleMouseUp),k("mousemove",i.onHandleMouseMove),k("touchmove",i.onHandleMouseMove))},r.addEventListener("touchend",i.onHandleMouseUp,!1),i.onCanvasMouseMove=function(e){if(e.preventDefault(),e.stopPropagation(),p){var t=f-("touchmove"===e.type?e.changedTouches[0].clientX:e.clientX),n=m-("touchmove"===e.type?e.changedTouches[0].clientY:e.clientY);E(d-t,g-n)}},s.addEventListener("touchmove",i.onCanvasMouseMove,!1);var O=null,Y=null;i.onHandleMouseMove=function(e){if(e.stopPropagation(),e.preventDefault(),!S)return!1;var t,n,o,r,a=O-("touchmove"===e.type?e.changedTouches[0].clientX:e.clientX),i=Y-("touchmove"===e.type?e.changedTouches[0].clientY:e.clientY);O="touchmove"===e.type?e.changedTouches[0].clientX:e.clientX,Y="touchmove"===e.type?e.changedTouches[0].clientY:e.clientY,H((t=a,n=i,o=T(Math.sqrt(Math.pow(t,2)+Math.pow(n,2))/C),r=T((2-P)*o*.6),0<t?-r:r))},r.addEventListener("touchmove",i.onHandleMouseMove,!1),i.onHandleMouseWheel=function(e){e.preventDefault(),H(0<e.deltaY?-.05:.05)},s.addEventListener("mousewheel",i.onHandleMouseWheel),r.addEventListener("mousewheel",i.onHandleMouseWheel)}}}]);
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d022856
--- /dev/null
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "angular-image-crop",
+  "version": "2.0.2",
+  "description": "A better way to crop images client-side using AngularJS",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andyshora/angular-image-crop.git"
+  },
+  "keywords": [
+    "angular",
+    "angularjs",
+    "image",
+    "crop",
+    "cropper",
+    "avatar"
+  ],
+  "authors": [
+    "Andy Shora <andyshora@gmail.com>"
+  ],
+  "contributors": [
+    "Ashish Bardhan <ashbardhan@gmail.com>",
+    "Benoit Lavenier <benoit.lavenier@gmail.com>"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/andyshora/angular-image-crop/issues"
+  },
+  "homepage": "http://andyshora.com/angular-image-cropper.html",
+  "dependencies": {
+    "angular": "^1.5.11"
+  },
+  "devDependencies": {
+    "grunt": "^1.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-less": "^2.0.0",
+    "grunt-contrib-uglify": "~4.0.1",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-ng-annotate": "^4.0.0"
+  }
+}
diff --git a/image-crop.js b/src/angular-image-crop.js
similarity index 88%
rename from image-crop.js
rename to src/angular-image-crop.js
index 960d088..3b064a3 100644
--- a/image-crop.js
+++ b/src/angular-image-crop.js
@@ -1,5 +1,5 @@
 /**
- * AngularJS Directive - Image Crop v1.1.0
+ * AngularJS Directive - Image Crop v2.0.2
  * Copyright (c) 2014 Andy Shora, andyshora@gmail.com, andyshora.com
  * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
  */
@@ -759,7 +759,8 @@
   })();
 
   angular.module('ImageCropper',[])
-    .directive('imageCrop', function() {
+    .directive('imageCrop', function($q) {
+      'ngInject'; // Need for ngAnnotate, before uglify
 
       return {
         template: '<div id="image-crop-{{ rand }}" class="ng-image-crop ng-image-crop--{{ shape }}" ng-style="moduleStyles"><section ng-style="sectionStyles" ng-show="step==1"></section><section ng-style="sectionStyles" ng-show="step==2"><canvas class="cropping-canvas" width="{{ canvasWidth }}" height="{{ canvasHeight }}" ng-mousemove="onCanvasMouseMove($event)" ng-mousedown="onCanvasMouseDown($event)"></canvas><div ng-style="croppingGuideStyles" class="cropping-guide"></div><div class="zoom-handle" ng-mousemove="onHandleMouseMove($event)" ng-mousedown="onHandleMouseDown($event)" ng-mouseup="onHandleMouseUp($event)"><span>&larr; zoom &rarr;</span></div></section><section ng-style="sectionStyles" class="image-crop-section-final" ng-show="step==3"><img class="image-crop-final" ng-src="{{ croppedDataUri }}" /></section></div>',
@@ -770,12 +771,15 @@
           width: '@',
           height: '@',
           shape: '@',
+          safeMove: '@',
+          fillColor: '@',
 		  src: '=',
           resultBlob: '=',
 		  result: '=',
           step: '=',
           padding: '@',
-		  maxSize: '@'
+          maxSize: '@',
+          resultFormat: '@'
         },
         link: function (scope, element, attributes) {
 		  
@@ -786,9 +790,11 @@
           scope.shape = scope.shape || 'circle';
           scope.width = parseInt(scope.width, 10) || 300;
           scope.height = parseInt(scope.height, 10) || 300;
+          scope.resultFormat = scope.resultFormat || 'image/png';
 
           scope.canvasWidth = scope.width + padding;
           scope.canvasHeight = scope.height + padding;
+          scope.saveMove = scope.safeMove !== 0 ? scope.safeMove : true;
 
           var $elm = element[0];
 
@@ -806,7 +812,7 @@
           var maxZoomGestureLength = 0;
           var maxZoomedInLevel = 0, maxZoomedOutLevel = 2;
           var minXPos = 0, maxXPos = (padding/2), minYPos = 0, maxYPos = (padding/2); // for dragging bounds		  
-		  var maxSize = scope.maxSize ? Number(scope.maxSize) : null; //max size of the image in px
+		      var maxSize = scope.maxSize ? Number(scope.maxSize) : null; //max size of the image in px
 		  
           var zoomWeight = .6;
           var ctx = $canvas.getContext('2d');
@@ -833,7 +839,7 @@
   		  
 		  function handleSize(base64ImageSrc) {
 		  
-			return new Promise(function(resolve, reject) {
+			return $q(function(resolve, reject) {
 				
 				if(!maxSize) {
 					return resolve(base64ImageSrc);
@@ -889,7 +895,7 @@
 					
 		  function handleEXIF(base64ImageSrc, exif) {
 		  		
-			return new Promise(function(resolve, reject) {
+			return $q(function(resolve, reject) {
 								
 				var img = new Image();
 				img.src = base64ImageSrc;
@@ -968,54 +974,53 @@
 		  
 		  function loadImage(base64ImageSrc) {
 		  
-			//get the EXIF information from the image
-            var byteString = atob(base64ImageSrc.split(',')[1]);
-            var binary = new BinaryFile(byteString, 0, byteString.length);
-            exif = EXIF.readFromBinaryFile(binary);		  
+			  //get the EXIF information from the image
+        var byteString = atob(base64ImageSrc.split(',')[1]);
+        var binary = new BinaryFile(byteString, 0, byteString.length);
+        exif = EXIF.readFromBinaryFile(binary);
            
 		    //handle image size
-            handleSize(base64ImageSrc).then(function(base64ImageSrc) {
+        handleSize(base64ImageSrc).then(function(base64ImageSrc) {
 			
-				//if the image has EXIF orientation..
-				if (exif && exif.Orientation && exif.Orientation > 1) {			
-					return handleEXIF(base64ImageSrc, exif);
-				} 
-				//otherwise, just return the image without any treatment
-				else {
-					return base64ImageSrc;
-				}
-				
-			}).then(function(base64ImageSrc) {
-			
-				$img.src = base64ImageSrc;
-				
-			}).catch(function(error) {							
-				console.log(error);				
-			});    
-			
-		  };
+          //if the image has EXIF orientation..
+          if (exif && exif.Orientation && exif.Orientation > 1) {
+            return handleEXIF(base64ImageSrc, exif);
+          }
+          //otherwise, just return the image without any treatment
+          else {
+            return base64ImageSrc;
+          }
+
+        }).then(function(base64ImageSrc) {
+
+          $img.src = base64ImageSrc;
+
+        }).catch(function(error) {
+          console.log(error);
+        });
+		  }
 		  
-          // ---------- EVENT HANDLERS ---------- //
-          fileReader.onload = function(e) {
-          	
-          	loadImage(this.resultBlob);	
+      // ---------- EVENT HANDLERS ---------- //
+      fileReader.onload = function(e) {
 
-          };	  
+        loadImage(this.resultBlob);
 
-          $img.onload = function() {
+      };
+
+      $img.onload = function() {
 		  
 			scope.step = 2;
 			scope.$apply();		  
 			
-            ctx.drawImage($img, 0, 0);
+      ctx = redraw(ctx, $img, 0, 0);
 
-            imgWidth = $img.width;
-            imgHeight = $img.height;
+      imgWidth = $img.width;
+      imgHeight = $img.height;
 
-            minLeft = (scope.width + padding) - this.width;
-            minTop = (scope.height + padding) - this.height;
-            newWidth = imgWidth;
-            newHeight = imgHeight;
+      minLeft = (scope.width + padding) - this.width;
+      minTop = (scope.height + padding) - this.height;
+      newWidth = imgWidth;
+      newHeight = imgHeight;
             
 			if(imgWidth >= imgHeight) {
 				maxZoomedInLevel = ($canvas.height - padding) / imgHeight;
@@ -1023,110 +1028,119 @@
 				maxZoomedInLevel = ($canvas.width - padding) / imgWidth;
 			}		
 
-            maxZoomGestureLength = to2Dp(Math.sqrt(Math.pow($canvas.width, 2) + Math.pow($canvas.height, 2)));
+      maxZoomGestureLength = to2Dp(Math.sqrt(Math.pow($canvas.width, 2) + Math.pow($canvas.height, 2)));
 
-            updateDragBounds();
+      updateDragBounds();
 			
 			var initialX = Math.round((minXPos + maxXPos)/2);
 			var initialY = Math.round((minYPos + maxYPos)/2);
 						
 			moveImage(initialX, initialY);
 			
-          };
+    };
 		  
-          function reset() {
-            files = [];
-            zoom = 1;
-			currentX = 0; 
-			currentY = 0; 
-			dragging = false; 
-			startX = 0; 
-			startY = 0; 
-			zooming = false;
-            ctx.clearRect(0, 0, $canvas.width, $canvas.height);            
-            $img.src = '';
-          }		  
-
-          // ---------- PRIVATE FUNCTIONS ---------- //
-          function moveImage(x, y) {
-			
-			x = x < minXPos ? minXPos : x;
-			x = x > maxXPos ? maxXPos : x;
-			y = y < minYPos ? minYPos : y;
-			y = y > maxYPos ? maxYPos : y;			
+    function reset() {
+      files = [];
+      zoom = 1;
+      currentX = 0;
+      currentY = 0;
+      dragging = false;
+      startX = 0;
+      startY = 0;
+      zooming = false;
+      ctx.clearRect(0, 0, $canvas.width, $canvas.height);
+      $img.src = '';
+    }
+
+      // ---------- PRIVATE FUNCTIONS ---------- //
+      function moveImage(x, y) {
+        if (scope.safeMove === "true") {
+          x = x < minXPos ? minXPos : x;
+          x = x > maxXPos ? maxXPos : x;
+          y = y < minYPos ? minYPos : y;
+          y = y > maxYPos ? maxYPos : y;
+        }
 
-            targetX = x;
-            targetY = y;
-			
-            ctx.clearRect(0, 0, $canvas.width, $canvas.height);
-            ctx.drawImage($img, x, y, newWidth, newHeight);
-			
-			return x == minXPos || x == maxXPos || y == minYPos || y == maxYPos;
-          }
+        targetX = x;
+        targetY = y;
 
-          function to2Dp(val) {
-            return Math.round(val * 1000) / 1000;
-          }
+        ctx = redraw(ctx, $img, x, y, newWidth, newHeight);
+        // return x == minXPos || x == maxXPos || y == minYPos || y == maxYPos;
+      }
 
-          function updateDragBounds() {
-            // $img.width, $canvas.width, zoom
+      function redraw(canvas, $img, x, y, newWidth, newHeight) {
+        ctx.clearRect(0, 0, $canvas.width, $canvas.height);
+        if (scope.fillColor !== undefined) {
+          ctx.fillStyle = scope.fillColor;
+          ctx.fillRect(0, 0, $canvas.width, $canvas.height);
+        }
 
-            minXPos = $canvas.width - ($img.width * zoom) - (padding/2);
-            minYPos = $canvas.height - ($img.height * zoom) - (padding/2);
+        ctx.drawImage($img, x, y, newWidth, newHeight);
+        return ctx;
+      }
 
-          }
+      function to2Dp(val) {
+        return Math.round(val * 1000) / 1000;
+      }
 
-          function zoomImage(val) {
+      function updateDragBounds() {
+        // $img.width, $canvas.width, zoom
 
-            if (!val) {
-              return;
-            }
-			
-            var proposedZoomLevel = to2Dp(zoom + val);
-			
-            if ((proposedZoomLevel < maxZoomedInLevel) || (proposedZoomLevel > maxZoomedOutLevel)) {
-              // image wont fill whole canvas
-              // or image is too far zoomed in, it's gonna get pretty pixelated!
-              return;
-            }
+        minXPos = $canvas.width - ($img.width * zoom) - (padding/2);
+        minYPos = $canvas.height - ($img.height * zoom) - (padding/2);
 
-            zoom = proposedZoomLevel;
-            // console.log('zoom', zoom);
+      }
 
-            updateDragBounds();
+      function zoomImage(val) {
 
-            newWidth = $img.width * zoom;
-            newHeight = $img.height * zoom;
+        if (!val) {
+          return;
+        }
 
-            var newXPos = currentX * zoom;
-            var newYPos = currentY * zoom;
+        var proposedZoomLevel = to2Dp(zoom + val);
 
-            // check if we've exposed the gutter
-            if (newXPos < minXPos) {
-              newXPos = minXPos;
-            } else if (newXPos > maxXPos) {
-              newXPos = maxXPos;
-            }
+        if ((proposedZoomLevel < maxZoomedInLevel) || (proposedZoomLevel > maxZoomedOutLevel)) {
+          // image wont fill whole canvas
+          // or image is too far zoomed in, it's gonna get pretty pixelated!
+          return;
+        }
 
-            if (newYPos < minYPos) {
-              newYPos = minYPos;
-            } else if (newYPos > maxYPos) {
-              newYPos = maxYPos;
-            }
+        zoom = proposedZoomLevel;
+        // console.log('zoom', zoom);
 
-            // check if image is still going to fit the bounds of the box
-            ctx.clearRect(0, 0, $canvas.width, $canvas.height);
-            ctx.drawImage($img, newXPos, newYPos, newWidth, newHeight);
-          }
+        updateDragBounds();
 
-          function calcZoomLevel(diffX, diffY) {
+        newWidth = $img.width * zoom;
+        newHeight = $img.height * zoom;
 
-            var hyp = Math.sqrt( Math.pow(diffX, 2) + Math.pow(diffY, 2) );
-            var zoomGestureRatio = to2Dp(hyp / maxZoomGestureLength);
-            var newZoomDiff = to2Dp((maxZoomedOutLevel - maxZoomedInLevel) * zoomGestureRatio * zoomWeight);
-            return diffX > 0 ? -newZoomDiff : newZoomDiff;
-			
-          }
+        var newXPos = currentX * zoom;
+        var newYPos = currentY * zoom;
+
+        // check if we've exposed the gutter
+        if (newXPos < minXPos) {
+          newXPos = minXPos;
+        } else if (newXPos > maxXPos) {
+          newXPos = maxXPos;
+        }
+
+        if (newYPos < minYPos) {
+          newYPos = minYPos;
+        } else if (newYPos > maxYPos) {
+          newYPos = maxYPos;
+        }
+
+        // check if image is still going to fit the bounds of the box
+        ctx = redraw(ctx, $img, newXPos, newYPos, newWidth, newHeight);
+      }
+
+      function calcZoomLevel(diffX, diffY) {
+
+        var hyp = Math.sqrt( Math.pow(diffX, 2) + Math.pow(diffY, 2) );
+        var zoomGestureRatio = to2Dp(hyp / maxZoomGestureLength);
+        var newZoomDiff = to2Dp((maxZoomedOutLevel - maxZoomedInLevel) * zoomGestureRatio * zoomWeight);
+        return diffX > 0 ? -newZoomDiff : newZoomDiff;
+
+      }
           
 		  function dataURItoBlob(dataURI) {
 			    var byteString, 
@@ -1151,18 +1165,18 @@
           // ---------- SCOPE FUNCTIONS ---------- //
 
 		  scope.$watch('src', function(){
-			if(scope.src) {
-				if(scope.step != 3) {
-					if(typeof(scope.src) == 'Blob') {
-						fileReader.readAsDataURL(scope.src);	
-					} else {
-						loadImage(scope.src);
-					}
-				}		
-			} else {
-				scope.step = 1;
-				reset();
-			}
+          if(scope.src) {
+            if(scope.step != 3) {
+              if(typeof(scope.src) === 'Blob') {
+                fileReader.readAsDataURL(scope.src);
+              } else {
+                loadImage(scope.src);
+              }
+            }
+          } else {
+            scope.step = 1;
+            reset();
+          }
 		  });	
 
 		  scope.$watch('crop',function(){
@@ -1183,16 +1197,16 @@
 
             $elm.getElementsByClassName('image-crop-section-final')[0].appendChild(tempCanvas);
 			
-			var dataUrl = tempCanvas.toDataURL();
+			      var dataUrl = tempCanvas.toDataURL(scope.resultFormat);
 			
-			scope.result = dataUrl;
+			      scope.result = dataUrl;
             scope.resultBlob = dataURItoBlob(dataUrl);
             
             scope.$apply();
           };
 
           scope.doCrop = function() {
-            scope.croppedDataUri = $canvas.toDataURL();
+            scope.croppedDataUri = $canvas.toDataURL(scope.resultFormat);
             scope.step = 3;
           };
 
@@ -1341,4 +1355,4 @@
     });
 
 
-})();
\ No newline at end of file
+})();
diff --git a/src/angular-image-crop.less b/src/angular-image-crop.less
new file mode 100644
index 0000000..be81900
--- /dev/null
+++ b/src/angular-image-crop.less
@@ -0,0 +1,77 @@
+/*
+ * ANGULAR-IMAGE-CROP Basic Styling
+ * Some of these styles you can override, things like colors,
+ * however some styles are required for the structure, and are critical to this module behaving properly!
+ */
+
+// Vendor-prefixed CSS mixin - e.g. .vendor(border-radius, 4px);`
+.vendor(@property, @value) {
+  -webkit-@{property}: @value;
+  -moz-@{property}: @value;
+  -ms-@{property}: @value;
+  -o-@{property}: @value;
+    @{property}: @value;
+}
+
+// Core component styles
+.ng-image-crop {
+  text-align: center;
+  margin: 0 auto;
+  position: relative;
+  .vendor(user-select, none);
+
+  // Each of the 3 steps in the process are contained within sections
+  > section {
+    background: #ccc;
+  }
+
+  // The cropping button
+  button {
+    margin-top: 10px;
+  }
+
+  // The dashed cropping guideline
+  .cropping-guide {
+    display: block;
+    background: rgba(255, 255, 255, .3);
+    border: 2px dashed white;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  // The canvas where the user positions the image via dragging and zooming
+  .cropping-canvas {
+    background: rgba(255, 255, 255, .3);
+    margin: 0 auto;
+    cursor: move;
+  }
+
+  // The overlayed draggable zoom handle in the corner of the module
+  .zoom-handle {
+    display: block;
+    position: absolute;
+    bottom: 1px;
+    left: 1px;
+    background: rgba(255, 255, 255, 0.7);
+    width: 80px;
+    height: 80px;
+    cursor: move;
+    border-radius: 200px 50px;
+
+    // The text within the zoom handle
+    > span {
+      color: rgba(0, 0, 0, 0.5);
+      .vendor(transform, rotate(-45deg));
+      display: block;
+      position: relative;
+      top: 32px;
+    }
+  }
+
+  // The circular themed cropping guideline
+  &--circle {
+    .cropping-guide {
+      .vendor(border-radius, 50%);
+    }
+  }
+}