lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-08 18:54:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed grayscale filter and updated tests

Browse Source
This commit is contained in:
Eric Rowell
2013-12-31 21:00:07 -08:00
parent 3321102784
commit bbdbbd4d61
10 changed files with 94 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/filters/Blur.js
View File

@@ -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);

9
src/filters/Brighten.js
View File

@@ -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

12
src/filters/ColorPack.js
View File

@@ -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

55
src/filters/Grayscale.js
View File

@@ -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;
}
};
})();

54
src/filters/Invert.js
View File

@@ -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];
}
};
})();