Options to specify quality and image format of result image

SpinGo · Aug 9, 2014 · 6ad2d5b · 6ad2d5b
1 parent 56c479a
commit 6ad2d5b
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,8 @@ The following code enables to select an image using a file input and crop it. Th
    [area-type="{circle|square}"]
    [area-min-size="{number}"]
    [result-image-size="{number}"]
+   [result-image-format="{string}"]
+   [result-image-quality="{number}"]
    [on-change="{expression}"]
    [on-load-begin="{expression"]
    [on-load-done="{expression"]
@@ -145,6 +147,14 @@ Assignable angular expression to data-bind to. NgImgCrop puts a data uri of a cr
 
 *Optional*. Width/height of the result image (in pixels). Default: 200.
 
+### result-image-format
+
+*Optional*. Format of result image. Possible values include image/jpeg, image/png, and image/webp. Browser support varies. Default: image/png.
+
+### result-image-quality
+
+*Optional*. Quality of result image. Possible values between 0.0 and 1.0 inclusive. Default: browser default.
+
 ### on-change
 
 *Optional*. Expression to evaluate upon changing the cropped part of the image. The cropped image data is available as $dataURI.

diff --git a/compile/minified/ng-img-crop.js b/compile/minified/ng-img-crop.js
diff --git a/compile/unminified/ng-img-crop.js b/compile/unminified/ng-img-crop.js
@@ -5,15 +5,13 @@
  * Copyright (c) 2014 Alex Kaul
  * License: MIT
  *
- * Generated at Tuesday, July 22nd, 2014, 10:37:39 PM
+ * Generated at Saturday, August 9th, 2014, 5:11:55 PM
  */
 (function() {
 'use strict';
 
 var crop = angular.module('ngImgCrop', []);
 
-'use strict';
-
 crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
   var CropAreaCircle = function() {
     CropArea.apply(this, arguments);
@@ -160,14 +158,11 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
     this._posDragStartY = 0;
   };
 
-
   return CropAreaCircle;
 }]);
 
 
 
-'use strict';
-
 crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
   var CropAreaSquare = function() {
     CropArea.apply(this, arguments);
@@ -378,12 +373,9 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
     this._posDragStartY = 0;
   };
 
-
   return CropAreaSquare;
 }]);
 
-'use strict';
-
 crop.factory('cropArea', ['cropCanvas', function(CropCanvas) {
   var CropArea = function(ctx, events) {
     this._ctx=ctx;
@@ -469,8 +461,6 @@ crop.factory('cropArea', ['cropCanvas', function(CropCanvas) {
   return CropArea;
 }]);
 
-'use strict';
-
 crop.factory('cropCanvas', [function() {
   // Shape = Array of [x,y]; [0, 0] - center
   var shapeArrowNW=[[-0.5,-2],[-3,-4.5],[-0.5,-7],[-7,-7],[-7,-0.5],[-4.5,-3],[-2,-0.5]];
@@ -523,7 +513,6 @@ crop.factory('cropCanvas', [function() {
         ctx.restore();
     };
 
-
     /* Icons */
 
     this.drawIconMove=function(centerCoords, scale) {
@@ -600,8 +589,6 @@ crop.factory('cropCanvas', [function() {
   };
 }]);
 
-'use strict';
-
 crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', function($document, CropAreaCircle, CropAreaSquare) {
   /* STATIC FUNCTIONS */
 
@@ -639,6 +626,12 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
     // Result Image size
     var resImgSize=200;
 
+    // Result Image type
+    var resImgFormat='image/png';
+
+    // Result Image quality
+    var resImgQuality=null;
+
     /* PRIVATE FUNCTIONS */
 
     // Draw Scene
@@ -747,7 +740,6 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
       }
     };
 
-
     this.getResultImageDataURI=function() {
       var temp_ctx, temp_canvas;
       temp_canvas = angular.element('<canvas></canvas>')[0];
@@ -757,7 +749,10 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
       if(image!==null){
         temp_ctx.drawImage(image, (theArea.getX()-theArea.getSize()/2)*(image.width/ctx.canvas.width), (theArea.getY()-theArea.getSize()/2)*(image.height/ctx.canvas.height), theArea.getSize()*(image.width/ctx.canvas.width), theArea.getSize()*(image.height/ctx.canvas.height), 0, 0, resImgSize, resImgSize);
       }
-      return temp_canvas.toDataURL();
+      if (resImgQuality!==null ){
+        return temp_canvas.toDataURL(resImgFormat, resImgQuality);
+      }
+      return temp_canvas.toDataURL(resImgFormat);
     };
 
     this.setNewImageSource=function(imageSource) {
@@ -837,6 +832,17 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
       }
     };
 
+    this.setResultImageFormat=function(format) {
+      resImgFormat = format;
+    };
+
+    this.setResultImageQuality=function(quality){
+      quality = parseFloat(quality);
+      if (!isNaN(quality) && quality>=0 && quality<=1){
+        resImgQuality = quality;
+      }
+    };
+
     this.setAreaType=function(type) {
       var curSize=theArea.getSize(),
           curMinSize=theArea.getMinSize(),
@@ -896,8 +902,6 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
 }]);
 
 
-'use strict';
-
 crop.factory('cropPubSub', [function() {
   return function() {
     var events = {};
@@ -932,6 +936,8 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
       areaType: '@',
       areaMinSize: '=',
       resultImageSize: '=',
+      resultImageFormat: '@',
+      resultImageQuality: '=',
 
       onChange: '&',
       onLoadBegin: '&',
@@ -1010,6 +1016,14 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
         cropHost.setResultImageSize(scope.resultImageSize);
         updateResultImage(scope);
       });
+      scope.$watch('resultImageFormat',function(){
+        cropHost.setResultImageFormat(scope.resultImageFormat);
+        updateResultImage(scope);
+      });
+      scope.$watch('resultImageQuality',function(){
+        cropHost.setResultImageQuality(scope.resultImageQuality);
+        updateResultImage(scope);
+      });
 
       // Update CropHost dimensions when the directive element is resized
       scope.$watch(

diff --git a/source/js/classes/crop-host.js b/source/js/classes/crop-host.js
@@ -37,6 +37,12 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
     // Result Image size
     var resImgSize=200;
 
+    // Result Image type
+    var resImgFormat='image/png';
+
+    // Result Image quality
+    var resImgQuality=null;
+
     /* PRIVATE FUNCTIONS */
 
     // Draw Scene
@@ -155,7 +161,10 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
       if(image!==null){
         temp_ctx.drawImage(image, (theArea.getX()-theArea.getSize()/2)*(image.width/ctx.canvas.width), (theArea.getY()-theArea.getSize()/2)*(image.height/ctx.canvas.height), theArea.getSize()*(image.width/ctx.canvas.width), theArea.getSize()*(image.height/ctx.canvas.height), 0, 0, resImgSize, resImgSize);
       }
-      return temp_canvas.toDataURL();
+      if (resImgQuality!==null ){
+        return temp_canvas.toDataURL(resImgFormat, resImgQuality);
+      }
+      return temp_canvas.toDataURL(resImgFormat);
     };
 
     this.setNewImageSource=function(imageSource) {
@@ -235,6 +244,17 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
       }
     };
 
+    this.setResultImageFormat=function(format) {
+      resImgFormat = format;
+    };
+
+    this.setResultImageQuality=function(quality){
+      quality = parseFloat(quality);
+      if (!isNaN(quality) && quality>=0 && quality<=1){
+        resImgQuality = quality;
+      }
+    };
+
     this.setAreaType=function(type) {
       var curSize=theArea.getSize(),
           curMinSize=theArea.getMinSize(),

diff --git a/source/js/ng-img-crop.js b/source/js/ng-img-crop.js
@@ -11,6 +11,8 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
       areaType: '@',
       areaMinSize: '=',
       resultImageSize: '=',
+      resultImageFormat: '@',
+      resultImageQuality: '=',
 
       onChange: '&',
       onLoadBegin: '&',
@@ -89,6 +91,14 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
         cropHost.setResultImageSize(scope.resultImageSize);
         updateResultImage(scope);
       });
+      scope.$watch('resultImageFormat',function(){
+        cropHost.setResultImageFormat(scope.resultImageFormat);
+        updateResultImage(scope);
+      });
+      scope.$watch('resultImageQuality',function(){
+        cropHost.setResultImageQuality(scope.resultImageQuality);
+        updateResultImage(scope);
+      });
 
       // Update CropHost dimensions when the directive element is resized
       scope.$watch(