Gaussian Blur filter for fabric.js

gaussianblur_filter.class.js

/**
 * Gaussian blur filter for fabricjs
 * Example: 
 * obj.filters.push(new fabric.Image.filters.GaussianBlur(6));
 * obj.applyFilters(canvas.renderAll.bind(canvas));
 * 
 * Adapted from <a href="http://www.quasimondo.com/BoxBlurForCanvas">http://www.quasimondo.com/BoxBlurForCanvas</a>
 */

(function() {

var fabric  = window.fabric,
extend = fabric.util.object.extend;

var mul_table = [ 1,57,41,21,203,34,97,73,227,91,149,62,105,45,39,137,241,107,3,173,39,71,65,238,219,101,187,87,81,151,141,133,249,117,221,209,197,187,177,169,5,153,73,139,133,127,243,233,223,107,103,99,191,23,177,171,165,159,77,149,9,139,135,131,253,245,119,231,224,109,211,103,25,195,189,23,45,175,171,83,81,79,155,151,147,9,141,137,67,131,129,251,123,30,235,115,113,221,217,53,13,51,50,49,193,189,185,91,179,175,43,169,83,163,5,79,155,19,75,147,145,143,35,69,17,67,33,65,255,251,247,243,239,59,29,229,113,111,219,27,213,105,207,51,201,199,49,193,191,47,93,183,181,179,11,87,43,85,167,165,163,161,159,157,155,77,19,75,37,73,145,143,141,35,138,137,135,67,33,131,129,255,63,250,247,61,121,239,237,117,29,229,227,225,111,55,109,216,213,211,209,207,205,203,201,199,197,195,193,48,190,47,93,185,183,181,179,178,176,175,173,171,85,21,167,165,41,163,161,5,79,157,78,154,153,19,75,149,74,147,73,144,143,71,141,140,139,137,17,135,134,133,66,131,65,129,1];
var shg_table = [0,9,10,10,14,12,14,14,16,15,16,15,16,15,15,17,18,17,12,18,16,17,17,19,19,18,19,18,18,19,19,19,20,19,20,20,20,20,20,20,15,20,19,20,20,20,21,21,21,20,20,20,21,18,21,21,21,21,20,21,17,21,21,21,22,22,21,22,22,21,22,21,19,22,22,19,20,22,22,21,21,21,22,22,22,18,22,22,21,22,22,23,22,20,23,22,22,23,23,21,19,21,21,21,23,23,23,22,23,23,21,23,22,23,18,22,23,20,22,23,23,23,21,22,20,22,21,22,24,24,24,24,24,22,21,24,23,23,24,21,24,23,24,22,24,24,22,24,24,22,23,24,24,24,20,23,22,23,24,24,24,24,24,24,24,23,21,23,22,23,24,24,24,22,24,24,24,23,22,24,24,25,23,25,25,23,24,25,25,24,22,25,25,25,24,23,24,25,25,25,25,25,25,25,25,25,25,25,25,23,25,23,24,25,25,25,25,25,25,25,25,25,24,22,25,25,23,25,25,20,24,25,24,25,25,22,24,25,24,25,24,25,25,24,25,25,25,25,22,25,25,25,24,25,24,25,18];

fabric.Image.filters.GaussianBlur = fabric.util.createClass(fabric.Image.filters.BaseFilter,{

  /**
   * Filter type
   */
   type: 'GaussianBlur',

  /**
   * Constructor
   */
   initialize: function(radius) { //radius of the blur
    this.radius = radius || 1;
    if(this.radius > 180) {
      this.radius = 180;
    }

    if(this.radius < 1) {
      this.radius = 1;
    }
  },

  /**
   * Applies blur to canvas element
   */
   applyTo: function(canvas) {
    var radius = this.radius;
    var width = canvas.width;
    var height = canvas.height;
    var context = canvas.getContext("2d");
    var imageData;

    imageData = context.getImageData( 0, 0, width, height );


    var pixels = imageData.data;

    var rsum,gsum,bsum,asum,x,y,i,p,p1,p2,yp,yi,yw,idx;   
    var wm = width - 1;
    var hm = height - 1;
    var wh = width * height;
    var rad1 = radius + 1;

    var r = [];
    var g = [];
    var b = [];
    
    var mul_sum = mul_table[radius];
    var shg_sum = shg_table[radius];
    
    var vmin = [];
    var vmax = [];
    
    yw = yi = 0;

    for ( y=0; y < height; y++ ){
      rsum = pixels[yw]   * rad1;
      gsum = pixels[yw+1] * rad1;
      bsum = pixels[yw+2] * rad1;

      for( i = 1; i <= radius; i++ ){
        p = yw + (((i > wm ? wm : i )) << 2 );
        rsum += pixels[p++];
        gsum += pixels[p++];
        bsum += pixels[p++];
      }

      for ( x = 0; x < width; x++ ){
        r[yi] = rsum;
        g[yi] = gsum;
        b[yi] = bsum;

        if( y==0) {
          vmin[x] = ( ( p = x + rad1) < wm ? p : wm ) << 2;
          vmax[x] = ( ( p = x - radius) > 0 ? p << 2 : 0 );
        } 

        p1 = yw + vmin[x];
        p2 = yw + vmax[x];

        rsum += pixels[p1++] - pixels[p2++];
        gsum += pixels[p1++] - pixels[p2++];
        bsum += pixels[p1++] - pixels[p2++];

        yi++;
      }
      yw += ( width << 2 );
    }

    for ( x = 0; x < width; x++ ){
      yp = x;
      rsum = r[yp] * rad1;
      gsum = g[yp] * rad1;
      bsum = b[yp] * rad1;

      for( i = 1; i <= radius; i++ ){
        yp += ( i > hm ? 0 : width );
        rsum += r[yp];
        gsum += g[yp];
        bsum += b[yp];
      }

      yi = x << 2;
      for ( y = 0; y < height; y++){
        pixels[yi]   = (rsum * mul_sum) >>> shg_sum;
        pixels[yi+1] = (gsum * mul_sum) >>> shg_sum;
        pixels[yi+2] = (bsum * mul_sum) >>> shg_sum;

        if( x == 0 ) {
          vmin[y] = ( ( p = y + rad1) < hm ? p : hm ) * width;
          vmax[y] = ( ( p = y - radius) > 0 ? p * width : 0 );
        } 

        p1 = x + vmin[y];
        p2 = x + vmax[y];

        rsum += r[p1] - r[p2];
        gsum += g[p1] - g[p2];
        bsum += b[p1] - b[p2];

        yi += width << 2;
      }
    }
    context.putImageData( imageData, 0, 0 );

  },

  /**
   * Returns object representation of an instance
   */
   toObject: function() {
    return extend(this.callSuper('toObject'), {
      radius: this.radius
    });
  }
});


fabric.Image.filters.GaussianBlur.fromObject = function(object) {
  return new fabric.Image.filters.GaussianBlur(object);
};

})()