lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 10:47:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improved Colorization filter.

Browse Source 
- Looks better (brightness of original is preserved)
 - Improved speed (2-6 times faster than original)
 - Reduced code
This commit is contained in:
ippo615
2013-12-07 11:31:38 -05:00
parent 2c3a29681e
commit 2397712f6e
2 changed files with 73 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/filters/ColorPack.js
View File

@@ -86,6 +86,18 @@
}
};
Kinetic.Filters.ShiftHue = function(src,dst,opt){
if( this === Kinetic.Filters ){
HSV(src, dst||src, opt );
}else{
HSV.call(this, src, dst||src, opt || {
hue: this.getFilterHueShiftDeg()
});
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterHueShiftDeg', 0);
/**
* get filter hue. Returns the hue shift for the HSV filter.
* 0 is no change, 359 is the maximum shift.
@@ -134,114 +146,7 @@
* @memberof Kinetic.Image.prototype
*/
})();
(function() {
var rgb_to_hsl = function(r,g,b){
// Input colors are in 0-255, calculations are between 0-1
r /= 255; g /= 255; b /= 255;
// http://en.wikipedia.org/wiki/HSL_and_HSV
// Convert to HSL
var max = Math.max(r,g,b),
min = Math.min(r,g,b),
chroma = max - min,
luminance = chroma / 2,
saturation = chroma / (1 - Math.abs(2*luminance-1)),
hue = 0;
if( max == r ){ hue = ((g-b)/chroma) % 6; }else
if( max == g ){ hue = (b-r)/chroma + 2; }else
if( max == b ){ hue = (r-g)/chroma + 4; }
return [(hue*60+360) % 360, saturation, luminance];
};
var pixelShiftHue = function(r,g,b,deg){
// Input colors are in 0-255, calculations are between 0-1
r /= 255; g /= 255; b /= 255;
// http://en.wikipedia.org/wiki/HSL_and_HSV
// Convert to HSL
var max = Math.max(r,g,b),
min = Math.min(r,g,b),
chroma = max - min,
luminance = chroma / 2,
saturation = chroma / (1 - Math.abs(2*luminance-1)),
hue = 0;
if( max == r ){ hue = ((g-b)/chroma) % 6; }else
if( max == g ){ hue = (b-r)/chroma + 2; }else
if( max == b ){ hue = (r-g)/chroma + 4; }
hue *= 60;
hue %= 360;
// Shift hue
hue += deg;
hue %= 360;
//hue /= 360;
// hsl to rgb:
hue /= 60;
var rR = 0, rG = 0, rB = 0,
//chroma = saturation*(1 - Math.abs(2*luminance - 1)),
tmp = chroma * (1-Math.abs(hue % 2 - 1)),
m = luminance - chroma/2;
if( 0 <= hue && hue < 1 ){ rR = chroma; rG = tmp; }else
if( 1 <= hue && hue < 2 ){ rG = chroma; rR = tmp; }else
if( 2 <= hue && hue < 3 ){ rG = chroma; rB = tmp; }else
if( 3 <= hue && hue < 4 ){ rB = chroma; rG = tmp; }else
if( 4 <= hue && hue < 5 ){ rB = chroma; rR = tmp; }else
if( 5 <= hue && hue < 6 ){ rR = chroma; rB = tmp; }
rR += m; rG += m; rB += m;
rR = (255*rR);
rG = (255*rG);
rB = (255*rB);
return [rR,rG,rB];
};
var shift_hue = function(imageData,deg){
var data = imageData.data,
pixel;
for(var i = 0; i < data.length; i += 4) {
pixel = pixelShiftHue(data[i+0],data[i+1],data[i+2],deg);
data[i+0] = pixel[0];
data[i+1] = pixel[1];
data[i+2] = pixel[2];
}
};
/**
* Shift Hue Filter.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.ShiftHue = function(imageData) {
shift_hue(imageData, this.getFilterHueShiftDeg() % 360 );
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterHueShiftDeg', 0);
/**
* get hue shift amount. The shift amount is a number between 0 and 360.
* @name getFilterBrightness
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set hue shift amount
* @name setFilterBrightness
* @method
* @memberof Kinetic.Image.prototype
*/
/**
@@ -252,23 +157,31 @@
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Colorize = function(imageData) {
var data = imageData.data;
var Colorize = function (src, dst, opt) {
var srcPixels = src.data,
dstPixels = dst.data,
nPixels = srcPixels.length,
color = opt.colorizeColor || [255,0,0],
i, brightness;
// First we'll colorize it red, then shift by the hue specified
var color = this.getFilterColorizeColor(),
hsl = rgb_to_hsl(color[0],color[1],color[2]),
hue = hsl[0];
for (i = 0; i < nPixels; i += 4) {
brightness = (0.34 * srcPixels[i] + 0.5 * srcPixels[i + 1] + 0.16 * srcPixels[i + 2])/255;
dstPixels[i ] = brightness*color[0]; // r
dstPixels[i + 1] = brightness*color[1]; // g
dstPixels[i + 2] = brightness*color[2]; // b
dstPixels[i + 3] = srcPixels[i + 3]; // alpha
}
};
// Color it red, by removing green and blue
for(var i = 0; i < data.length; i += 4) {
data[i + 1] = 0;
data[i + 2] = 0;
}
// Shift by the hue
shift_hue(imageData,hue);
};
Kinetic.Filters.Colorize = function(src,dst,opt){
if( this === Kinetic.Filters ){
Colorize(src, dst||src, opt );
}else{
Colorize.call(this, src, dst||src, opt || {
colorizeColor: this.getFilterColorizeColor()
});
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterColorizeColor', [255,0,0] );
/**

56
test/unit/filters/ColorPack-test.js
View File

@@ -64,28 +64,48 @@ suite('Color Pack', function() {
// ======================================================
test('colorize transparancy', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var colors = [
[255,0,0],
[255,128,0],
[255,255,0],
[0,255,0],
[0,255,128],
[0,255,255],
[0,0,255],
[128,0,255],
[255,0,255],
[0,0,0],
[128,128,128],
[255,255,255]
];
var i,l = colors.length;
var nAdded = 0;
for( i=0; i<l; i+=1 ){
var imageObj = new Image();
imageObj.onload = (function(color,x){ return function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
var darth = new Kinetic.Image({
x: x,
y: 32,
image: imageObj,
draggable: true
});
layer.add(darth);
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor(color);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor([0,128,255]);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
nAdded += 1;
if( nAdded >= l ){
stage.add(layer);
layer.draw();
done();
}
};})(colors[i],-64+i/l*stage.getWidth());
imageObj.src = 'assets/lion.png';
}
});