-
Notifications
You must be signed in to change notification settings - Fork 0
/
hsl-filter.js
91 lines (76 loc) · 2.64 KB
/
hsl-filter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
fabric.Image.filters.HSL = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
type: 'HSL',
initialize: function(options) {
options || (options = {});
this.hue = options.hue || 0;
this.saturation = options.saturation || 0;
this.lightness = options.lightness || 0;
},
rgbToHsl: function(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0;
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
},
hslToRgb: function(h, s, l) {
var r, g, b;
if (s == 0) {
r = g = b = l;
} else {
function hue2rgb(p, q, t){
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [r * 255, g * 255, b * 255];
},
applyTo: function(canvasEl) {
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
data = imageData.data;
for (var i=0; i<data.length; i+=4)
{
// Convert RGB to HSL
var hsl = this.rgbToHsl(data[i], data[i+1], data[i+2]);
// Apply HSL values
if (this.hue ) hsl[0] = this.hue;
if (this.saturation) hsl[1] = this.saturation;
if (this.lightness ) hsl[2] = this.lightness;
// Convert HSL back to RGB
var rgb = this.hslToRgb(hsl[0], hsl[1], hsl[2]);
// Update data
data[i] = rgb[0];
data[i+1] = rgb[1];
data[i+2] = rgb[2];
}
context.putImageData(imageData, 0, 0);
},
toObject: function() {
return extend(this.callSuper('toObject'), {
hue: this.hue,
saturation: this.saturation,
lightness: this.lightness
});
}
});