fabric-rails 1.0.12 → 1.0.12.1

data/vendor/assets/javascripts/fabric/image.class.js

@@ -0,0 +1,418 @@
+(function(global) {
+
+  "use strict";
+
+  var extend = fabric.util.object.extend;
+
+  if (!global.fabric) {
+    global.fabric = { };
+  }
+
+  if (global.fabric.Image) {
+    fabric.warn('fabric.Image is already defined.');
+    return;
+  }
+
+  /**
+   * Image class
+   * @class Image
+   * @extends fabric.Object
+   */
+  fabric.Image = fabric.util.createClass(fabric.Object, /** @scope fabric.Image.prototype */ {
+
+    /**
+     * Type of an object
+     * @property
+     * @type String
+     */
+    type: 'image',
+
+    /**
+     * Constructor
+     * @param {HTMLImageElement | String} element Image element
+     * @param {Object} [options] Options object
+     * @return {fabric.Image}
+     */
+    initialize: function(element, options) {
+      options || (options = { });
+
+      this.callSuper('initialize', options);
+      this._initElement(element);
+      this._originalImage = this.getElement();
+      this._initConfig(options);
+
+      this.filters = [ ];
+
+      if (options.filters) {
+        this.filters = options.filters;
+        this.applyFilters();
+      }
+    },
+
+    /**
+     * Returns image element which this instance if based on
+     * @method getElement
+     * @return {HTMLImageElement} image element
+     */
+    getElement: function() {
+      return this._element;
+    },
+
+    /**
+     * Sets image element for this instance to a specified one
+     * @method setElement
+     * @param {HTMLImageElement} element
+     * @return {fabric.Image} thisArg
+     * @chainable
+     */
+    setElement: function(element) {
+      this._element = element;
+      this._initConfig();
+      return this;
+    },
+
+    /**
+     * Returns original size of an image
+     * @method getOriginalSize
+     * @return {Object} object with "width" and "height" properties
+     */
+    getOriginalSize: function() {
+      var element = this.getElement();
+      return {
+        width: element.width,
+        height: element.height
+      };
+    },
+
+    /**
+     * Renders image on a specified context
+     * @method render
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    render: function(ctx, noTransform) {
+      ctx.save();
+      var m = this.transformMatrix;
+      // this._resetWidthHeight();
+      if (this.group) {
+        ctx.translate(-this.group.width/2 + this.width/2, -this.group.height/2 + this.height/2);
+      }
+      if (m) {
+        ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+      }
+      if (!noTransform) {
+        this.transform(ctx);
+      }
+
+      this._setShadow(ctx);
+      this._render(ctx);
+      this._removeShadow(ctx);
+
+      if (this.active && !noTransform) {
+        this.drawBorders(ctx);
+        this.drawControls(ctx);
+      }
+      ctx.restore();
+    },
+
+    /**
+     * Returns object representation of an instance
+     * @method toObject
+     * @param {Array} propertiesToInclude
+     * @return {Object} object representation of an instance
+     */
+    toObject: function(propertiesToInclude) {
+      return extend(this.callSuper('toObject', propertiesToInclude), {
+        src: this._originalImage.src || this._originalImage._src,
+        filters: this.filters.concat()
+      });
+    },
+
+    /**
+     * Returns SVG representation of an instance
+     * @method toSVG
+     * @return {String} svg representation of an instance
+     */
+    toSVG: function() {
+      return '<g transform="' + this.getSvgTransform() + '">'+
+                '<image xlink:href="' + this.getSvgSrc() + '" '+
+                  'style="' + this.getSvgStyles() + '" ' +
+                  // we're essentially moving origin of transformation from top/left corner to the center of the shape
+                  // by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
+                  // so that object's center aligns with container's left/top
+                  'transform="translate('+ (-this.width/2) + ' ' + (-this.height/2) + ')" ' +
+                  'width="' + this.width + '" ' +
+                  'height="' + this.height + '"' + '></image>' +
+              '</g>';
+    },
+
+    /**
+     * Returns source of an image
+     * @method getSrc
+     * @return {String} Source of an image
+     */
+    getSrc: function() {
+      return this.getElement().src || this.getElement()._src;
+    },
+
+    /**
+     * Returns string representation of an instance
+     * @method toString
+     * @return {String} String representation of an instance
+     */
+    toString: function() {
+      return '#<fabric.Image: { src: "' + this.getSrc() + '" }>';
+    },
+
+    /**
+     * Returns a clone of an instance
+     * @method clone
+     * @param {Array} propertiesToInclude
+     * @param {Function} callback Callback is invoked with a clone as a first argument
+     */
+    clone: function(callback, propertiesToInclude) {
+      this.constructor.fromObject(this.toObject(propertiesToInclude), callback);
+    },
+
+    /**
+     * Applies filters assigned to this image (from "filters" array)
+     * @mthod applyFilters
+     * @param {Function} callback Callback is invoked when all filters have been applied and new image is generated
+     * @return {fabric.Image} thisArg
+     * @chainable
+     */
+    applyFilters: function(callback) {
+
+      if (this.filters.length === 0) {
+        this.setElement(this._originalImage);
+        callback && callback();
+        return;
+      }
+
+      var isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined',
+          imgEl = this._originalImage,
+          canvasEl = fabric.util.createCanvasElement(),
+          replacement = isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img'),
+          _this = this;
+
+      canvasEl.width = imgEl.width;
+      canvasEl.height = imgEl.height;
+
+      canvasEl.getContext('2d').drawImage(imgEl, 0, 0, imgEl.width, imgEl.height);
+
+      this.filters.forEach(function(filter) {
+        filter && filter.applyTo(canvasEl);
+      });
+
+       /** @ignore */
+      replacement.onload = function() {
+        _this._element = replacement;
+        callback && callback();
+        replacement.onload = canvasEl = imgEl = null;
+      };
+      replacement.width = imgEl.width;
+      replacement.height = imgEl.height;
+
+      if (isLikelyNode) {
+        // cut off data:image/png;base64, part in the beginning
+        var base64str = canvasEl.toDataURL('image/png').substring(22);
+        replacement.src = new Buffer(base64str, 'base64');
+        _this._element = replacement;
+
+        // onload doesn't fire in node, so we invoke callback manually
+        callback && callback();
+      }
+      else {
+        replacement.src = canvasEl.toDataURL('image/png');
+      }
+
+      return this;
+    },
+
+    /**
+     * @private
+     * @method _render
+     * @param ctx
+     */
+    _render: function(ctx) {
+      ctx.drawImage(
+        this._element,
+        -this.width / 2,
+        -this.height / 2,
+        this.width,
+        this.height
+      );
+    },
+
+    /**
+     * @private
+     * @method _resetWidthHeight
+     */
+    _resetWidthHeight: function() {
+      var element = this.getElement();
+
+      this.set('width', element.width);
+      this.set('height', element.height);
+    },
+
+    /**
+     * The Image class's initialization method. This method is automatically
+     * called by the constructor.
+     * @private
+     * @method _initElement
+     * @param {HTMLImageElement|String} el The element representing the image
+     */
+    _initElement: function(element) {
+      this.setElement(fabric.util.getById(element));
+      fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS);
+    },
+
+    /**
+     * @private
+     * @method _initConfig
+     * @param {Object} [options] Options object
+     */
+    _initConfig: function(options) {
+      options || (options = { });
+      this.setOptions(options);
+      this._setWidthHeight(options);
+    },
+
+    /**
+     * @private
+     * @method _initFilters
+     * @param {Object} object Object with filters property
+     */
+    _initFilters: function(object) {
+      if (object.filters && object.filters.length) {
+        this.filters = object.filters.map(function(filterObj) {
+          return filterObj && fabric.Image.filters[filterObj.type].fromObject(filterObj);
+        });
+      }
+    },
+
+    /**
+     * @private
+     * @method _setWidthHeight
+     * @param {Object} [options] Object with width/height properties
+     */
+    _setWidthHeight: function(options) {
+      this.width = 'width' in options
+        ? options.width
+        : (this.getElement().width || 0);
+
+      this.height = 'height' in options
+        ? options.height
+        : (this.getElement().height || 0);
+    },
+
+    /**
+     * Returns complexity of an instance
+     * @method complexity
+     * @return {Number} complexity
+     */
+    complexity: function() {
+      return 1;
+    }
+  });
+
+  /**
+   * Default CSS class name for canvas
+   * @static
+   * @type String
+   */
+  fabric.Image.CSS_CANVAS = "canvas-img";
+
+  /**
+   * Alias for getSrc
+   * @static
+   * @method getSvgSrc
+   */
+  fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc;
+
+  /**
+   * Creates an instance of fabric.Image from its object representation
+   * @static
+   * @method fromObject
+   * @param {Object} object
+   * @param {Function} [callback] Callback to invoke when an image instance is created
+   */
+  fabric.Image.fromObject = function(object, callback) {
+    var img = fabric.document.createElement('img'),
+        src = object.src;
+
+    if (object.width) {
+      img.width = object.width;
+    }
+    if (object.height) {
+      img.height = object.height;
+    }
+
+    /** @ignore */
+    img.onload = function() {
+      fabric.Image.prototype._initFilters.call(object, object);
+
+      var instance = new fabric.Image(img, object);
+      callback && callback(instance);
+        img = img.onload = img.onerror = null;
+      };
+
+      /** @ignore */
+      img.onerror = function() {
+        fabric.log('Error loading ' + img.src);
+        callback && callback(null, true);
+        img = img.onload = img.onerror = null;
+      };
+    img.src = src;
+  };
+
+  /**
+   * Creates an instance of fabric.Image from an URL string
+   * @static
+   * @method fromURL
+   * @param {String} url URL to create an image from
+   * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
+   * @param {Object} [imgOptions] Options object
+   */
+  fabric.Image.fromURL = function(url, callback, imgOptions) {
+    var img = fabric.document.createElement('img');
+
+    /** @ignore */
+    img.onload = function() {
+      if (callback) {
+        callback(new fabric.Image(img, imgOptions));
+      }
+      img = img.onload = null;
+    };
+    img.src = url;
+  };
+
+  /**
+   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement})
+   * @static
+   * @see http://www.w3.org/TR/SVG/struct.html#ImageElement
+   */
+  fabric.Image.ATTRIBUTE_NAMES = 'x y width height fill fill-opacity opacity stroke stroke-width transform xlink:href'.split(' ');
+
+  /**
+   * Returns {@link fabric.Image} instance from an SVG element
+   * @static
+   * @method fabric.Image.fromElement
+   * @param {SVGElement} element Element to parse
+   * @param {Function} callback Callback to execute when fabric.Image object is created
+   * @param {Object} [options] Options object
+   * @return {fabric.Image}
+   */
+  fabric.Image.fromElement = function(element, callback, options) {
+    var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES);
+
+    fabric.Image.fromURL(parsedAttributes['xlink:href'], callback, extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
+  };
+
+  /**
+   * Indicates that instances of this type are async
+   * @static
+   * @type Boolean
+   */
+  fabric.Image.async = true;
+
+})(typeof exports !== 'undefined' ? exports : this);

data/vendor/assets/javascripts/fabric/image_filters.js

@@ -0,0 +1,809 @@
+/**
+ * @namespace
+ */
+fabric.Image.filters = { };
+
+/**
+ * Grayscale image filter class
+ * @class fabric.Image.filters.Grayscale
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Image.filters.Grayscale.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Grayscale",
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @memberOf fabric.Image.filters.Grayscale.prototype
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        iLen = imageData.width,
+        jLen = imageData.height,
+        index, average, i, j;
+
+     for (i = 0; i < iLen; i++) {
+       for (j = 0; j < jLen; j++) {
+
+         index = (i * 4) * jLen + (j * 4);
+         average = (data[index] + data[index + 1] + data[index + 2]) / 3;
+
+         data[index]     = average;
+         data[index + 1] = average;
+         data[index + 2] = average;
+       }
+     }
+
+     context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return { type: this.type };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Grayscale.fromObject
+ * @return {fabric.Image.filters.Grayscale}
+ */
+fabric.Image.filters.Grayscale.fromObject = function() {
+  return new fabric.Image.filters.Grayscale();
+};
+
+/**
+ * Remove white filter class
+ * @class fabric.Image.filters.RemoveWhite
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Image.filters.RemoveWhite.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "RemoveWhite",
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.RemoveWhite.prototype
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+    this.threshold = options.threshold || 30;
+    this.distance = options.distance || 20;
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        threshold = this.threshold,
+        distance = this.distance,
+        limit = 255 - threshold,
+        abs = Math.abs,
+        r, g, b;
+
+    for (var i = 0, len = data.length; i < len; i += 4) {
+
+      r = data[i];
+      g = data[i+1];
+      b = data[i+2];
+
+      if (r > limit &&
+          g > limit &&
+          b > limit &&
+          abs(r-g) < distance &&
+          abs(r-b) < distance &&
+          abs(g-b) < distance) {
+
+        data[i+3] = 1;
+      }
+    }
+
+    context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      threshold: this.threshold,
+      distance: this.distance
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.RemoveWhite.fromObject
+ * @return {fabric.Image.filters.RemoveWhite}
+ */
+fabric.Image.filters.RemoveWhite.fromObject = function(object) {
+  return new fabric.Image.filters.RemoveWhite(object);
+};
+
+/**
+ * Invert filter class
+ * @class fabric.Image.filters.Invert
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.filters.Invert.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Invert",
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @memberOf fabric.Image.filters.Invert.prototype
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        iLen = data.length, i;
+
+     for (i = 0; i < iLen; i+=4) {
+        data[i] = 255 - data[i];
+        data[i + 1] = 255 - data[i + 1];
+        data[i + 2] = 255 - data[i + 2];
+     }
+
+     context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return { type: this.type };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Invert.fromObject
+ * @return {fabric.Image.filters.Invert}
+ */
+fabric.Image.filters.Invert.fromObject = function() {
+  return new fabric.Image.filters.Invert();
+};
+
+/**
+ * Sepia filter class
+ * @class fabric.Image.filters.Sepia
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Sepia = fabric.util.createClass( /** @scope fabric.Image.filters.Sepia.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Sepia",
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @memberOf fabric.Image.filters.Sepia.prototype
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        iLen = data.length, i, avg;
+
+     for (i = 0; i < iLen; i+=4) {
+        avg = 0.3  * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
+        data[i] = avg + 100;
+        data[i + 1] = avg + 50;
+        data[i + 2] = avg + 255;
+     }
+
+     context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return { type: this.type };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Sepia.fromObject
+ * @return {fabric.Image.filters.Sepia}
+ */
+fabric.Image.filters.Sepia.fromObject = function() {
+  return new fabric.Image.filters.Sepia();
+};
+
+/**
+ * Sepia2 filter class
+ * @class fabric.Image.filters.Sepia2
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Sepia2 = fabric.util.createClass( /** @scope fabric.Image.filters.Sepia2.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Sepia2",
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @memberOf fabric.Image.filters.Sepia.prototype
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        iLen = data.length, i, r, g, b;
+
+     for (i = 0; i < iLen; i+=4) {
+
+        r = data[i];
+        g = data[i + 1];
+        b = data[i + 2];
+
+        data[i] = (r * 0.393 + g * 0.769 + b * 0.189 ) / 1.351;
+        data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168 ) / 1.203;
+        data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131 ) / 2.140;
+     }
+
+     context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return { type: this.type };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Sepia2.fromObject
+ * @return {fabric.Image.filters.Sepia2}
+ */
+fabric.Image.filters.Sepia2.fromObject = function() {
+  return new fabric.Image.filters.Sepia2();
+};
+
+/**
+ * Brightness filter class
+ * @class fabric.Image.filters.Brightness
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Brightness = fabric.util.createClass( /** @scope fabric.Image.filters.Brightness.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Brightness",
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.Brightness.prototype
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+    this.brightness = options.brightness || 100;
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        brightness = this.brightness;
+
+    for (var i = 0, len = data.length; i < len; i += 4) {
+      data[i] += brightness;
+      data[i + 1] += brightness;
+      data[i + 2] += brightness;
+    }
+
+    context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      brightness: this.brightness
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Brightness.fromObject
+ * @return {fabric.Image.filters.Brightness}
+ */
+fabric.Image.filters.Brightness.fromObject = function(object) {
+  return new fabric.Image.filters.Brightness(object);
+};
+
+/**
+ * Noise filter class
+ * @class fabric.Image.filters.Noise
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Noise = fabric.util.createClass( /** @scope fabric.Image.filters.Noise.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Noise",
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.Noise.prototype
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+    this.noise = options.noise || 100;
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        noise = this.noise, rand;
+
+    for (var i = 0, len = data.length; i < len; i += 4) {
+
+      rand = (0.5 - Math.random()) * noise;
+
+      data[i] += rand;
+      data[i + 1] += rand;
+      data[i + 2] += rand;
+    }
+
+    context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      noise: this.noise
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Noise.fromObject
+ * @return {fabric.Image.filters.Noise}
+ */
+fabric.Image.filters.Noise.fromObject = function(object) {
+  return new fabric.Image.filters.Noise(object);
+};
+
+/**
+ * GradientTransparency filter class
+ * @class fabric.Image.filters.GradientTransparency
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.GradientTransparency = fabric.util.createClass( /** @scope fabric.Image.filters.GradientTransparency.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "GradientTransparency",
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.GradientTransparency
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+    this.threshold = options.threshold || 100;
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        threshold = this.threshold,
+        total = data.length;
+
+    for (var i = 0, len = data.length; i < len; i += 4) {
+      data[i + 3] = threshold + 255 * (total - i) / total;
+    }
+
+    context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      threshold: this.threshold
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.GradientTransparency.fromObject
+ * @return {fabric.Image.filters.GradientTransparency}
+ */
+fabric.Image.filters.GradientTransparency.fromObject = function(object) {
+  return new fabric.Image.filters.GradientTransparency(object);
+};
+
+/**
+ * Tint filter class
+ * @class fabric.Image.filters.Tint
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Tint = fabric.util.createClass( /** @scope fabric.Image.filters.Tint.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: "Tint",
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.Tint.prototype
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+    this.color = options.color || 0;
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        iLen = data.length, i, a;
+
+    var rgb = parseInt(this.color, 10).toString(16);
+
+    var cr = parseInt('0x' + rgb.substr(0, 2), 16);
+    var cg = parseInt('0x' + rgb.substr(2, 2), 16);
+    var cb = parseInt('0x' + rgb.substr(4, 2), 16);
+
+    for (i = 0; i < iLen; i+=4) {
+
+      a = data[i+3];
+
+      if (a > 0){
+        data[i] = cr;
+        data[i+1] = cg;
+        data[i+2] = cb;
+      }
+    }
+
+    context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      color: this.color
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Tint.fromObject
+ * @return {fabric.Image.filters.Tint}
+ */
+fabric.Image.filters.Tint.fromObject = function(object) {
+  return new fabric.Image.filters.Tint(object);
+};
+
+/**
+ * Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
+ * @class fabric.Image.filters.Convolute
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Convolute = fabric.util.createClass(/** @scope fabric.Image.filters.Convolute.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: 'Convolute',
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.Convolute.prototype
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+
+    this.opaque = options.opaque;
+    this.matrix = options.matrix || [ 0, 0, 0,
+                                      0, 1, 0,
+                                      0, 0, 0 ];
+
+    var canvasEl = fabric.util.createCanvasElement();
+    this.tmpCtx = canvasEl.getContext('2d');
+  },
+
+  /**
+   * @private
+   * @method _createImageData
+   */
+  _createImageData: function(w, h) {
+    return this.tmpCtx.createImageData(w, h);
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+
+    var weights = this.matrix;
+    var context = canvasEl.getContext('2d');
+    var pixels = context.getImageData(0, 0, canvasEl.width, canvasEl.height);
+
+    var side = Math.round(Math.sqrt(weights.length));
+    var halfSide = Math.floor(side/2);
+    var src = pixels.data;
+    var sw = pixels.width;
+    var sh = pixels.height;
+
+    // pad output by the convolution matrix
+    var w = sw;
+    var h = sh;
+    var output = this._createImageData(w, h);
+
+    var dst = output.data;
+
+    // go through the destination image pixels
+    var alphaFac = this.opaque ? 1 : 0;
+    for (var y=0; y<h; y++) {
+      for (var x=0; x<w; x++) {
+        var sy = y;
+        var sx = x;
+        var dstOff = (y*w+x)*4;
+        // calculate the weighed sum of the source image pixels that
+        // fall under the convolution matrix
+        var r=0, g=0, b=0, a=0;
+        for (var cy=0; cy<side; cy++) {
+          for (var cx=0; cx<side; cx++) {
+            var scy = sy + cy - halfSide;
+            var scx = sx + cx - halfSide;
+            if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
+              var srcOff = (scy*sw+scx)*4;
+              var wt = weights[cy*side+cx];
+              r += src[srcOff] * wt;
+              g += src[srcOff+1] * wt;
+              b += src[srcOff+2] * wt;
+              a += src[srcOff+3] * wt;
+            }
+          }
+        }
+        dst[dstOff] = r;
+        dst[dstOff+1] = g;
+        dst[dstOff+2] = b;
+        dst[dstOff+3] = a + alphaFac*(255-a);
+      }
+    }
+
+    context.putImageData(output, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      matrix: this.matrix
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Convolute.fromObject
+ * @return {fabric.Image.filters.Convolute}
+ */
+fabric.Image.filters.Convolute.fromObject = function(object) {
+  return new fabric.Image.filters.Convolute(object);
+};
+
+/**
+ * Pixelate filter class
+ * @class fabric.Image.filters.Pixelate
+ * @memberOf fabric.Image.filters
+ */
+fabric.Image.filters.Pixelate = fabric.util.createClass(/** @scope fabric.Image.filters.Pixelate.prototype */ {
+
+  /**
+   * Filter type
+   * @param {String} type
+   */
+  type: 'Pixelate',
+
+  /**
+   * Constructor
+   * @memberOf fabric.Image.filters.Pixelate.prototype
+   * @param {Object} [options] Options object
+   */
+  initialize: function(options) {
+    options || (options = { });
+    this.blocksize = options.blocksize || 4;
+  },
+
+  /**
+   * Applies filter to canvas element
+   * @method applyTo
+   * @param {Object} canvasEl Canvas element to apply filter to
+   */
+  applyTo: function(canvasEl) {
+
+    var context = canvasEl.getContext('2d'),
+        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
+        data = imageData.data,
+        iLen = imageData.width,
+        jLen = imageData.height,
+        index, i, j, r, g, b, a;
+
+    for (i = 0; i < iLen; i += this.blocksize) {
+      for (j = 0; j < jLen; j += this.blocksize) {
+
+        index = (i * 4) * jLen + (j * 4);
+
+        r = data[index];
+        g = data[index+1];
+        b = data[index+2];
+        a = data[index+3];
+
+        /*
+          blocksize: 4
+
+          [1,x,x,x,1]
+          [x,x,x,x,1]
+          [x,x,x,x,1]
+          [x,x,x,x,1]
+          [1,1,1,1,1]
+        */
+
+        for (var _i = i, _ilen = i + this.blocksize; _i < _ilen; _i++) {
+          for (var _j = j, _jlen = j + this.blocksize; _j < _jlen; _j++) {
+            index = (_i * 4) * jLen + (_j * 4);
+            data[index] = r;
+            data[index + 1] = g;
+            data[index + 2] = b;
+            data[index + 3] = a;
+          }
+        }
+      }
+    }
+
+    context.putImageData(imageData, 0, 0);
+  },
+
+  /**
+   * Returns json representation of filter
+   * @method toJSON
+   * @return {String} json representation of filter
+   */
+  toJSON: function() {
+    return {
+      type: this.type,
+      blocksize: this.blocksize
+    };
+  }
+});
+
+/**
+ * Returns filter instance from an object representation
+ * @static
+ * @method fabric.Image.filters.Pixelate.fromObject
+ * @return {fabric.Image.filters.Pixelate}
+ */
+fabric.Image.filters.Pixelate.fromObject = function(object) {
+  return new fabric.Image.filters.Pixelate(object);
+};