Added Sepia Filter

Add Sepia Filter from Pixastic Library
This commit is contained in:
Barrett Harber 2013-11-25 20:39:08 -05:00
parent 7b83cdf8aa
commit 14570f7bed
4 changed files with 79 additions and 1 deletions

View File

@ -43,7 +43,8 @@ module.exports = function(grunt) {
'src/filters/Blur.js',
'src/filters/Mask.js',
'src/filters/ColorPack.js',
'src/filters/ConvolvePack.js'
'src/filters/ConvolvePack.js',
'src/filters/Sepia.js'
];
// Project configuration.

48
src/filters/Sepia.js Normal file
View File

@ -0,0 +1,48 @@
(function() {
/**
* Sepia Filter
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
*/
Kinetic.Filters.Sepia = function(imageData) {
var data = imageData.data,
w = imageData.width,
y = imageData.height,
w4 = w*4,
offsetY,
x,
offset,
or,
og,
ob,
r,
g,
b;
do {
offsetY = (y-1)*w4;
x = w;
do {
offset = offsetY + (x-1)*4;
or = data[offset];
og = data[offset+1];
ob = data[offset+2];
r = or * 0.393 + og * 0.769 + ob * 0.189;
g = or * 0.349 + og * 0.686 + ob * 0.168;
b = or * 0.272 + og * 0.534 + ob * 0.131;
data[offset] = r > 255 ? 255 : r;
data[offset+1] = g > 255 ? 255 : g;
data[offset+2] = b > 255 ? 255 : b;
} while (--x);
} while (--y);
};
})();

View File

@ -82,6 +82,7 @@
<script src="unit/filters/Invert-test.js"></script>
<script src="unit/filters/Mask-test.js"></script>
<script src="unit/filters/ConvolvePack-test.js"></script>
<script src="unit/filters/Sepia-test.js"></script>
<!--=============== functional tests ================-->

View File

@ -0,0 +1,28 @@
suite('Sepia', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Sepia);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});