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

rewrote sepia filter from scratch

Browse Source
This commit is contained in:
Anton Lavrenov
2019-02-20 14:04:58 -05:00
parent 033dbc57cd
commit b251fe3f57
3 changed files with 23 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
konva.js
View File

@@ -16850,39 +16850,26 @@
* @returns {Float} * @returns {Float}
*/ */
// based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
/** /**
* Sepia Filter
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* @function * @function
* @name Sepia * @name Sepia
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Sepia]); * node.filters([Konva.Filters.Sepia]);
*/ */
var Sepia = function (imageData) { var 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; var data = imageData.data, nPixels = data.length, i, r, g, b;
do { for (i = 0; i < nPixels; i += 4) {
offsetY = (y - 1) * w4; r = data[i + 0];
x = w; g = data[i + 1];
do { b = data[i + 2];
offset = offsetY + (x - 1) * 4; data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
or = data[offset]; data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
og = data[offset + 1]; data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
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;
data[offset + 3] = data[offset + 3];
} while (--x);
} while (--y);
}; };
/** /**

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

46
src/filters/Sepia.ts
View File

@@ -1,51 +1,29 @@
// based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
/** /**
* Sepia Filter
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* @function * @function
* @name Sepia * @name Sepia
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Sepia]); * node.filters([Konva.Filters.Sepia]);
*/ */
export const Sepia = function(imageData) { export const Sepia = function(imageData) {
var data = imageData.data, var data = imageData.data,
w = imageData.width, nPixels = data.length,
y = imageData.height, i,
w4 = w * 4,
offsetY,
x,
offset,
or,
og,
ob,
r, r,
g, g,
b; b;
do { for (i = 0; i < nPixels; i += 4) {
offsetY = (y - 1) * w4; r = data[i + 0];
x = w; g = data[i + 1];
do { b = data[i + 2];
offset = offsetY + (x - 1) * 4;
or = data[offset]; data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
og = data[offset + 1]; data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
ob = data[offset + 2]; data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
}
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;
data[offset + 3] = data[offset + 3];
} while (--x);
} while (--y);
}; };