Add Contrast Filter

konva.d.ts

@@ -50,6 +50,7 @@ declare module Konva {
             static Sepia(imageData: any): Filter;
             static Solarize(imageData: any): Filter;
             static Threshold(imageData: any): Filter;
+            static Contrast(imageData: any): Filter;
         }
 
         export class Animation {
@@ -117,6 +118,8 @@ declare module Konva {
             blue(blue: number): Node;
             brightness(): number;
             brightness(brightness: number): Node;
+            contrast(): number;
+            contrast(contrast: number): Node;
             blurRadius(): number;
             blurRadius(radius: number): Node;
             cache(config?: CacheConfig): Node;

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v1.7.6
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Fri Jan 12 2018
+ * Date: Wed Jan 31 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@@ -4914,31 +4914,31 @@
   Konva.Collection.mapMethods(Konva.Node);
 })(Konva);
 
-(function() {
-  'use strict';
-  /**
-    * Grayscale Filter
-    * @function
-    * @memberof Konva.Filters
-    * @param {Object} imageData
-    * @example
-    * node.cache();
-    * node.filters([Konva.Filters.Grayscale]);
-    */
-  Konva.Filters.Grayscale = function(imageData) {
-    var data = imageData.data, len = data.length, i, brightness;
-
-    for (i = 0; i < len; i += 4) {
-      brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
-      // red
-      data[i] = brightness;
-      // green
-      data[i + 1] = brightness;
-      // blue
-      data[i + 2] = brightness;
-    }
-  };
-})();
+(function() {
+  'use strict';
+  /**
+    * Grayscale Filter
+    * @function
+    * @memberof Konva.Filters
+    * @param {Object} imageData
+    * @example
+    * node.cache();
+    * node.filters([Konva.Filters.Grayscale]);
+    */
+  Konva.Filters.Grayscale = function(imageData) {
+    var data = imageData.data, len = data.length, i, brightness;
+
+    for (i = 0; i < len; i += 4) {
+      brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+      // red
+      data[i] = brightness;
+      // green
+      data[i + 1] = brightness;
+      // blue
+      data[i + 2] = brightness;
+    }
+  };
+})();
 
 (function(Konva) {
   'use strict';
@@ -4986,30 +4986,30 @@
     */
 })(Konva);
 
-(function() {
-  'use strict';
-  /**
-    * Invert Filter
-    * @function
-    * @memberof Konva.Filters
-    * @param {Object} imageData
-    * @example
-    * node.cache();
-    * node.filters([Konva.Filters.Invert]);
-    */
-  Konva.Filters.Invert = function(imageData) {
-    var data = imageData.data, len = data.length, i;
-
-    for (i = 0; i < len; i += 4) {
-      // red
-      data[i] = 255 - data[i];
-      // green
-      data[i + 1] = 255 - data[i + 1];
-      // blue
-      data[i + 2] = 255 - data[i + 2];
-    }
-  };
-})();
+(function() {
+  'use strict';
+  /**
+    * Invert Filter
+    * @function
+    * @memberof Konva.Filters
+    * @param {Object} imageData
+    * @example
+    * node.cache();
+    * node.filters([Konva.Filters.Invert]);
+    */
+  Konva.Filters.Invert = function(imageData) {
+    var data = imageData.data, len = data.length, i;
+
+    for (i = 0; i < len; i += 4) {
+      // red
+      data[i] = 255 - data[i];
+      // green
+      data[i + 1] = 255 - data[i + 1];
+      // blue
+      data[i + 2] = 255 - data[i + 2];
+    }
+  };
+})();
 
 /*
  the Gauss filter
@@ -6046,16 +6046,16 @@
   }
 
   /**
-	 * Mask Filter
-	 * @function
-	 * @name Mask
-	 * @memberof Konva.Filters
-	 * @param {Object} imageData
-	 * @example
+   * Mask Filter
+   * @function
+   * @name Mask
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
      * node.cache();
      * node.filters([Konva.Filters.Mask]);
      * node.threshold(200);
-	 */
+   */
   Konva.Filters.Mask = function(imageData) {
     // Detect pixels close to the background color
     var threshold = this.threshold(),
@@ -6914,215 +6914,215 @@
     */
 })();
 
-(function() {
-  'use strict';
-  /**
-     * Noise Filter. Randomly adds or substracts to the color channels
-     * @function
-     * @name Noise
-     * @memberof Konva.Filters
-     * @param {Object} imageData
-     * @author ippo615
-     * @example
-     * node.cache();
-     * node.filters([Konva.Filters.Noise]);
-     * node.noise(0.8);
-     */
-  Konva.Filters.Noise = function(imageData) {
-    var amount = this.noise() * 255,
-      data = imageData.data,
-      nPixels = data.length,
-      half = amount / 2,
-      i;
-
-    for (i = 0; i < nPixels; i += 4) {
-      data[i + 0] += half - 2 * half * Math.random();
-      data[i + 1] += half - 2 * half * Math.random();
-      data[i + 2] += half - 2 * half * Math.random();
-    }
-  };
-
-  Konva.Factory.addGetterSetter(
-    Konva.Node,
-    'noise',
-    0.2,
-    null,
-    Konva.Factory.afterSetFilter
-  );
-  /**
-    * get/set noise amount.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
-    * @name noise
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Number} noise
-    * @returns {Number}
-    */
-})();
+(function() {
+  'use strict';
+  /**
+     * Noise Filter. Randomly adds or substracts to the color channels
+     * @function
+     * @name Noise
+     * @memberof Konva.Filters
+     * @param {Object} imageData
+     * @author ippo615
+     * @example
+     * node.cache();
+     * node.filters([Konva.Filters.Noise]);
+     * node.noise(0.8);
+     */
+  Konva.Filters.Noise = function(imageData) {
+    var amount = this.noise() * 255,
+      data = imageData.data,
+      nPixels = data.length,
+      half = amount / 2,
+      i;
 
-/*eslint-disable max-depth */
-(function() {
-  'use strict';
-  /**
-     * Pixelate Filter. Averages groups of pixels and redraws
-     *  them as larger pixels
-     * @function
-     * @name Pixelate
-     * @memberof Konva.Filters
-     * @param {Object} imageData
-     * @author ippo615
-     * @example
-     * node.cache();
-     * node.filters([Konva.Filters.Pixelate]);
-     * node.pixelSize(10);
-     */
-
-  Konva.Filters.Pixelate = function(imageData) {
-    var pixelSize = Math.ceil(this.pixelSize()),
-      width = imageData.width,
-      height = imageData.height,
-      x,
-      y,
-      i,
-      //pixelsPerBin = pixelSize * pixelSize,
-      red,
-      green,
-      blue,
-      alpha,
-      nBinsX = Math.ceil(width / pixelSize),
-      nBinsY = Math.ceil(height / pixelSize),
-      xBinStart,
-      xBinEnd,
-      yBinStart,
-      yBinEnd,
-      xBin,
-      yBin,
-      pixelsInBin;
-    imageData = imageData.data;
-
-    if (pixelSize <= 0) {
-      Konva.Util.error('pixelSize value can not be <= 0');
-      return;
-    }
-
-    for (xBin = 0; xBin < nBinsX; xBin += 1) {
-      for (yBin = 0; yBin < nBinsY; yBin += 1) {
-        // Initialize the color accumlators to 0
-        red = 0;
-        green = 0;
-        blue = 0;
-        alpha = 0;
-
-        // Determine which pixels are included in this bin
-        xBinStart = xBin * pixelSize;
-        xBinEnd = xBinStart + pixelSize;
-        yBinStart = yBin * pixelSize;
-        yBinEnd = yBinStart + pixelSize;
-
-        // Add all of the pixels to this bin!
-        pixelsInBin = 0;
-        for (x = xBinStart; x < xBinEnd; x += 1) {
-          if (x >= width) {
-            continue;
-          }
-          for (y = yBinStart; y < yBinEnd; y += 1) {
-            if (y >= height) {
-              continue;
-            }
-            i = (width * y + x) * 4;
-            red += imageData[i + 0];
-            green += imageData[i + 1];
-            blue += imageData[i + 2];
-            alpha += imageData[i + 3];
-            pixelsInBin += 1;
-          }
-        }
-
-        // Make sure the channels are between 0-255
-        red = red / pixelsInBin;
-        green = green / pixelsInBin;
-        blue = blue / pixelsInBin;
-
-        // Draw this bin
-        for (x = xBinStart; x < xBinEnd; x += 1) {
-          if (x >= width) {
-            continue;
-          }
-          for (y = yBinStart; y < yBinEnd; y += 1) {
-            if (y >= height) {
-              continue;
-            }
-            i = (width * y + x) * 4;
-            imageData[i + 0] = red;
-            imageData[i + 1] = green;
-            imageData[i + 2] = blue;
-            imageData[i + 3] = alpha;
-          }
-        }
-      }
-    }
-  };
-
-  Konva.Factory.addGetterSetter(
-    Konva.Node,
-    'pixelSize',
-    8,
-    null,
-    Konva.Factory.afterSetFilter
-  );
-  /**
-    * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
-    * @name pixelSize
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Integer} pixelSize
-    * @returns {Integer}
-    */
-})();
+    for (i = 0; i < nPixels; i += 4) {
+      data[i + 0] += half - 2 * half * Math.random();
+      data[i + 1] += half - 2 * half * Math.random();
+      data[i + 2] += half - 2 * half * Math.random();
+    }
+  };
 
-(function() {
-  'use strict';
-  /**
-     * Threshold Filter. Pushes any value above the mid point to
-     *  the max and any value below the mid point to the min.
-     *  This affects the alpha channel.
-     * @function
-     * @name Threshold
-     * @memberof Konva.Filters
-     * @param {Object} imageData
-     * @author ippo615
-     * @example
-     * node.cache();
-     * node.filters([Konva.Filters.Threshold]);
-     * node.threshold(0.1);
-     */
-
-  Konva.Filters.Threshold = function(imageData) {
-    var level = this.threshold() * 255,
-      data = imageData.data,
-      len = data.length,
-      i;
-
-    for (i = 0; i < len; i += 1) {
-      data[i] = data[i] < level ? 0 : 255;
-    }
-  };
-
-  Konva.Factory.addGetterSetter(
-    Konva.Node,
-    'threshold',
-    0.5,
-    null,
-    Konva.Factory.afterSetFilter
-  );
-  /**
-    * get/set threshold.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
-    * @name threshold
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Number} threshold
-    * @returns {Number}
-    */
-})();
+  Konva.Factory.addGetterSetter(
+    Konva.Node,
+    'noise',
+    0.2,
+    null,
+    Konva.Factory.afterSetFilter
+  );
+  /**
+    * get/set noise amount.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
+    * @name noise
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Number} noise
+    * @returns {Number}
+    */
+})();
+
+/*eslint-disable max-depth */
+(function() {
+  'use strict';
+  /**
+     * Pixelate Filter. Averages groups of pixels and redraws
+     *  them as larger pixels
+     * @function
+     * @name Pixelate
+     * @memberof Konva.Filters
+     * @param {Object} imageData
+     * @author ippo615
+     * @example
+     * node.cache();
+     * node.filters([Konva.Filters.Pixelate]);
+     * node.pixelSize(10);
+     */
+
+  Konva.Filters.Pixelate = function(imageData) {
+    var pixelSize = Math.ceil(this.pixelSize()),
+      width = imageData.width,
+      height = imageData.height,
+      x,
+      y,
+      i,
+      //pixelsPerBin = pixelSize * pixelSize,
+      red,
+      green,
+      blue,
+      alpha,
+      nBinsX = Math.ceil(width / pixelSize),
+      nBinsY = Math.ceil(height / pixelSize),
+      xBinStart,
+      xBinEnd,
+      yBinStart,
+      yBinEnd,
+      xBin,
+      yBin,
+      pixelsInBin;
+    imageData = imageData.data;
+
+    if (pixelSize <= 0) {
+      Konva.Util.error('pixelSize value can not be <= 0');
+      return;
+    }
+
+    for (xBin = 0; xBin < nBinsX; xBin += 1) {
+      for (yBin = 0; yBin < nBinsY; yBin += 1) {
+        // Initialize the color accumlators to 0
+        red = 0;
+        green = 0;
+        blue = 0;
+        alpha = 0;
+
+        // Determine which pixels are included in this bin
+        xBinStart = xBin * pixelSize;
+        xBinEnd = xBinStart + pixelSize;
+        yBinStart = yBin * pixelSize;
+        yBinEnd = yBinStart + pixelSize;
+
+        // Add all of the pixels to this bin!
+        pixelsInBin = 0;
+        for (x = xBinStart; x < xBinEnd; x += 1) {
+          if (x >= width) {
+            continue;
+          }
+          for (y = yBinStart; y < yBinEnd; y += 1) {
+            if (y >= height) {
+              continue;
+            }
+            i = (width * y + x) * 4;
+            red += imageData[i + 0];
+            green += imageData[i + 1];
+            blue += imageData[i + 2];
+            alpha += imageData[i + 3];
+            pixelsInBin += 1;
+          }
+        }
+
+        // Make sure the channels are between 0-255
+        red = red / pixelsInBin;
+        green = green / pixelsInBin;
+        blue = blue / pixelsInBin;
+
+        // Draw this bin
+        for (x = xBinStart; x < xBinEnd; x += 1) {
+          if (x >= width) {
+            continue;
+          }
+          for (y = yBinStart; y < yBinEnd; y += 1) {
+            if (y >= height) {
+              continue;
+            }
+            i = (width * y + x) * 4;
+            imageData[i + 0] = red;
+            imageData[i + 1] = green;
+            imageData[i + 2] = blue;
+            imageData[i + 3] = alpha;
+          }
+        }
+      }
+    }
+  };
+
+  Konva.Factory.addGetterSetter(
+    Konva.Node,
+    'pixelSize',
+    8,
+    null,
+    Konva.Factory.afterSetFilter
+  );
+  /**
+    * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
+    * @name pixelSize
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Integer} pixelSize
+    * @returns {Integer}
+    */
+})();
+
+(function() {
+  'use strict';
+  /**
+     * Threshold Filter. Pushes any value above the mid point to
+     *  the max and any value below the mid point to the min.
+     *  This affects the alpha channel.
+     * @function
+     * @name Threshold
+     * @memberof Konva.Filters
+     * @param {Object} imageData
+     * @author ippo615
+     * @example
+     * node.cache();
+     * node.filters([Konva.Filters.Threshold]);
+     * node.threshold(0.1);
+     */
+
+  Konva.Filters.Threshold = function(imageData) {
+    var level = this.threshold() * 255,
+      data = imageData.data,
+      len = data.length,
+      i;
+
+    for (i = 0; i < len; i += 1) {
+      data[i] = data[i] < level ? 0 : 255;
+    }
+  };
+
+  Konva.Factory.addGetterSetter(
+    Konva.Node,
+    'threshold',
+    0.5,
+    null,
+    Konva.Factory.afterSetFilter
+  );
+  /**
+    * get/set threshold.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
+    * @name threshold
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Number} threshold
+    * @returns {Number}
+    */
+})();
 
 (function() {
   'use strict';
@@ -7524,6 +7524,77 @@
   );
 })();
 
+(function (Konva) {
+  'use strict';
+  /**
+   * Contrast Filter.
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Contrast]);
+   * node.contrast(10);
+   */
+
+  Konva.Filters.Contrast = function (imageData) {
+    var adjust = Math.pow((parseInt(this.contrast()) + 100) / 100, 2);
+
+    var data = imageData.data,
+      nPixels = data.length,
+      red = 150,
+      green = 150,
+      blue = 150,
+      i;
+
+    for (i = 0; i < nPixels; i += 4) {
+      red = data[i];
+      green = data[i + 1];
+      blue = data[i + 2];
+
+      //Red channel
+      red /= 255;
+      red -= 0.5;
+      red *= adjust;
+      red += 0.5;
+      red *= 255;
+
+      //Green channel
+      green /= 255;
+      green -= 0.5;
+      green *= adjust;
+      green += 0.5;
+      green *= 255;
+
+      //Blue channel
+      blue /= 255;
+      blue -= 0.5;
+      blue *= adjust;
+      blue += 0.5;
+      blue *= 255;
+
+      red = (red < 0 ? 0 : (red > 255 ? 255 : red));
+      green = (green < 0 ? 0 : (green > 255 ? 255 : green));
+      blue = (blue < 0 ? 0 : (blue > 255 ? 255 : blue));
+
+      data[i] = red;
+      data[i + 1] = green;
+      data[i + 2] = blue;
+    }
+  };
+
+  /**
+   * get/set filter contrast.  The contrast is a number between -100 and 100.&nbsp;
+   * Use with {@link Konva.Filters.Contrast} filter.
+   * @name contrast
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} contrast value between -100 and 100
+   * @returns {Number}
+   */
+  Konva.Factory.addGetterSetter(Konva.Node, 'contrast', 0, null, Konva.Factory.afterSetFilter);
+})(Konva);
+
 (function() {
   'use strict';
   /**

src/filters/Contrast.js

@@ -0,0 +1,70 @@
+(function (Konva) {
+  'use strict';
+  /**
+   * Contrast Filter.
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Contrast]);
+   * node.contrast(10);
+   */
+
+  Konva.Filters.Contrast = function (imageData) {
+    var adjust = Math.pow((parseInt(this.contrast()) + 100) / 100, 2);
+
+    var data = imageData.data,
+      nPixels = data.length,
+      red = 150,
+      green = 150,
+      blue = 150,
+      i;
+
+    for (i = 0; i < nPixels; i += 4) {
+      red = data[i];
+      green = data[i + 1];
+      blue = data[i + 2];
+
+      //Red channel
+      red /= 255;
+      red -= 0.5;
+      red *= adjust;
+      red += 0.5;
+      red *= 255;
+
+      //Green channel
+      green /= 255;
+      green -= 0.5;
+      green *= adjust;
+      green += 0.5;
+      green *= 255;
+
+      //Blue channel
+      blue /= 255;
+      blue -= 0.5;
+      blue *= adjust;
+      blue += 0.5;
+      blue *= 255;
+
+      red = (red < 0 ? 0 : (red > 255 ? 255 : red));
+      green = (green < 0 ? 0 : (green > 255 ? 255 : green));
+      blue = (blue < 0 ? 0 : (blue > 255 ? 255 : blue));
+
+      data[i] = red;
+      data[i + 1] = green;
+      data[i + 2] = blue;
+    }
+  };
+
+  /**
+   * get/set filter contrast.  The contrast is a number between -100 and 100.&nbsp;
+   * Use with {@link Konva.Filters.Contrast} filter.
+   * @name contrast
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} contrast value between -100 and 100
+   * @returns {Number}
+   */
+  Konva.Factory.addGetterSetter(Konva.Node, 'contrast', 0, null, Konva.Factory.afterSetFilter);
+})(Konva);