diff --git a/src/filters/Blur.js b/src/filters/Blur.js index efd7c3f8..42f48707 100644 --- a/src/filters/Blur.js +++ b/src/filters/Blur.js @@ -329,32 +329,12 @@ * @memberof Kinetic.Filters * @param {Object} imageData */ + Kinetic.Filters.Blur = function(imageData) { + var radius = this.blurRadius() | 0; - var Blur = function(src,dst,opt){ - var radius = opt.filterRadius | 0; - - // If a different desntination image data is supplied - // copy the source and perform the blur on the destination - var i; - if( dst !== src ){ - i = src.data.length; - while( i-- ){ - dst.data[i] = src.data[i]; - } + if (radius > 0) { + filterGaussBlurRGBA(imageData, radius); } - - if( radius > 0 ){ - filterGaussBlurRGBA(dst,radius); - } - }; - Kinetic.Filters.Blur = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - Blur(src, dst||src, opt ); - }else{ - Blur.call(this, src, dst||src, opt || { - filterRadius: this.blurRadius() - }); - } }; Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blurRadius', 0); diff --git a/src/filters/Brighten.js b/src/filters/Brighten.js index 5a1b1220..bd816b73 100644 --- a/src/filters/Brighten.js +++ b/src/filters/Brighten.js @@ -6,9 +6,12 @@ * @param {Object} imageData */ Kinetic.Filters.Brighten = function(imageData) { - var brightness = this.brightness() * 255; - var data = imageData.data; - for(var i = 0; i < data.length; i += 4) { + var brightness = this.brightness() * 255, + data = imageData.data, + len = data.length, + i; + + for(i = 0; i < len; i += 4) { // red data[i] += brightness; // green diff --git a/src/filters/ColorPack.js b/src/filters/ColorPack.js index 0f9f25f0..6ed16a56 100644 --- a/src/filters/ColorPack.js +++ b/src/filters/ColorPack.js @@ -79,9 +79,9 @@ HSV(src, dst||src, opt ); }else{ HSV.call(this, src, dst||src, opt || { - hue: this.getFilterHue(), - saturation: this.getFilterSaturation(), - value: this.getFilterValue() + hue: this.hue(), + saturation: this.saturation(), + value: this.value() }); } }; @@ -92,7 +92,7 @@ HSV(src, dst||src, opt ); }else{ HSV.call(this, src, dst||src, opt || { - hue: this.getFilterHueShiftDeg() + hue: this.hueShiftDeg() }); } }; @@ -179,12 +179,12 @@ Colorize(src, dst||src, opt ); }else{ Colorize.call(this, src, dst||src, opt || { - colorizeColor: this.getFilterColorizeColor() + colorizeColor: this.color() }); } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'colorizeColor', [255,0,0] ); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'color', [255,0,0] ); /** * Gets the colorizing color. * @name getFilterColorizeColor diff --git a/src/filters/Grayscale.js b/src/filters/Grayscale.js index 5b888c02..452d4f5e 100644 --- a/src/filters/Grayscale.js +++ b/src/filters/Grayscale.js @@ -1,36 +1,23 @@ -(function () { - - /** - * Grayscale Filter. Converts the image to shades of gray. - * Performs w*h pixel reads and w*h pixel writes. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt, There are no options for this filter - */ - - var Grayscale = function (src, dst, opt) { - var srcPixels = src.data, - dstPixels = dst.data, - nPixels = srcPixels.length, - i, brightness; - for (i = 0; i < nPixels; i += 4) { - brightness = 0.34 * srcPixels[i] + 0.5 * srcPixels[i + 1] + 0.16 * srcPixels[i + 2]; - dstPixels[i] = brightness; // r - dstPixels[i + 1] = brightness; // g - dstPixels[i + 2] = brightness; // b - dstPixels[i + 3] = srcPixels[i + 3]; // alpha - } - }; - - Kinetic.Filters.Grayscale = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - Grayscale(src, dst||src, opt ); - }else{ - Grayscale.call(this, src, dst||src, {} ); - } - }; +(function() { + /** + * Grayscale Filter + * @function + * @memberof Kinetic.Filters + * @param {Object} imageData + */ + Kinetic.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; + } + }; })(); diff --git a/src/filters/Invert.js b/src/filters/Invert.js index e003ff4d..1259afea 100644 --- a/src/filters/Invert.js +++ b/src/filters/Invert.js @@ -1,36 +1,22 @@ -(function () { +(function() { + /** + * Invert Filter + * @function + * @memberof Kinetic.Filters + * @param {Object} imageData + */ + Kinetic.Filters.Invert = function(imageData) { + var data = imageData.data, + len = data.length, + i; - /** - * Invert Filter. Moves all color channels toward the opposite extreme - * ie 0 becomes 255, 10 becomes 245 etc... It does not alter the - * alpha channel. - * Performs w*h pixel reads and w*h pixel writes. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt, There are no options for this filter - */ - - var Invert = function (src, dst, opt) { - var srcPixels = src.data, - dstPixels = dst.data, - nPixels = srcPixels.length, - i; - for (i = 0; i < nPixels; i += 4) { - dstPixels[i+0] = 255 - srcPixels[i+0]; // r - dstPixels[i+1] = 255 - srcPixels[i+1]; // g - dstPixels[i+2] = 255 - srcPixels[i+2]; // b - dstPixels[i+3] = srcPixels[i+3]; // copy alpha - } - }; - - Kinetic.Filters.Invert = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - Invert(src, dst||src, opt ); - }else{ - Invert.call(this, src, dst||src, {} ); - } - }; + 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]; + } + }; })(); \ No newline at end of file diff --git a/test/runner.html b/test/runner.html index adb647b2..c78030a7 100644 --- a/test/runner.html +++ b/test/runner.html @@ -81,14 +81,14 @@ - - + - - + + - +