-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfilters.ts
More file actions
304 lines (277 loc) · 7.89 KB
/
Copy pathfilters.ts
File metadata and controls
304 lines (277 loc) · 7.89 KB
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
/**
* Detachable filter system for applying visual effects to images and videos.
*
* These filters work with both FFmpeg (video) and can be converted to
* canvas-based operations (images).
*/
export type FilterName = 'none' | 'winter' | 'autumn' | 'spring' | 'summer' | 'night' | 'sepia' | 'vintage';
export interface FilterConfig {
name: FilterName;
description: string;
/** FFmpeg filter_complex string for video */
ffmpegFilter: string;
/** Canvas-based color adjustment parameters */
canvasAdjustments: {
brightness: number; // -100 to 100
contrast: number; // -100 to 100
saturation: number; // 0 to 2 (1 = normal)
hue: number; // -180 to 180 degrees
colorOverlay?: { // Optional color overlay
r: number;
g: number;
b: number;
opacity: number; // 0 to 1
};
temperature?: number; // -100 (cool) to 100 (warm)
};
}
export const FILTERS: Record<FilterName, FilterConfig> = {
none: {
name: 'none',
description: 'No filter applied',
ffmpegFilter: '',
canvasAdjustments: {
brightness: 0,
contrast: 0,
saturation: 1,
hue: 0,
},
},
winter: {
name: 'winter',
description: 'Cool blue tones with slight desaturation',
// FFmpeg: increase blue, decrease warmth, add slight brightness
ffmpegFilter: 'colorbalance=bs=0.15:bm=0.1:bh=0.05:rs=-0.1:gs=-0.05,eq=brightness=0.05:saturation=0.85',
canvasAdjustments: {
brightness: 5,
contrast: 5,
saturation: 0.85,
hue: -10,
temperature: -30,
colorOverlay: {
r: 200,
g: 220,
b: 255,
opacity: 0.08,
},
},
},
autumn: {
name: 'autumn',
description: 'Warm orange and golden tones',
ffmpegFilter: 'colorbalance=rs=0.15:rm=0.1:rh=0.05:gs=0.05:bs=-0.1:bm=-0.1,eq=saturation=1.2:contrast=1.05',
canvasAdjustments: {
brightness: 0,
contrast: 8,
saturation: 1.2,
hue: 15,
temperature: 40,
colorOverlay: {
r: 255,
g: 180,
b: 100,
opacity: 0.06,
},
},
},
spring: {
name: 'spring',
description: 'Fresh, vibrant greens and soft tones',
ffmpegFilter: 'colorbalance=gs=0.1:gm=0.08:rs=0.05,eq=brightness=0.08:saturation=1.15',
canvasAdjustments: {
brightness: 8,
contrast: 3,
saturation: 1.15,
hue: 5,
temperature: 10,
colorOverlay: {
r: 220,
g: 255,
b: 220,
opacity: 0.05,
},
},
},
summer: {
name: 'summer',
description: 'Bright, warm golden hour feel',
ffmpegFilter: 'colorbalance=rs=0.1:rm=0.08:gs=0.05:bs=-0.05,eq=brightness=0.1:saturation=1.1:contrast=1.05',
canvasAdjustments: {
brightness: 10,
contrast: 5,
saturation: 1.1,
hue: 10,
temperature: 25,
colorOverlay: {
r: 255,
g: 240,
b: 200,
opacity: 0.07,
},
},
},
night: {
name: 'night',
description: 'Dark blue moonlit atmosphere',
ffmpegFilter: 'colorbalance=bs=0.25:bm=0.2:bh=0.15:rs=-0.15:gs=-0.1,eq=brightness=-0.15:saturation=0.7:contrast=1.1',
canvasAdjustments: {
brightness: -15,
contrast: 10,
saturation: 0.7,
hue: -20,
temperature: -50,
colorOverlay: {
r: 50,
g: 80,
b: 150,
opacity: 0.15,
},
},
},
sepia: {
name: 'sepia',
description: 'Classic sepia/vintage brown tones',
ffmpegFilter: 'colorchannelmixer=.393:.769:.189:0:.349:.686:.168:0:.272:.534:.131',
canvasAdjustments: {
brightness: 0,
contrast: 5,
saturation: 0.3,
hue: 30,
temperature: 30,
colorOverlay: {
r: 210,
g: 180,
b: 140,
opacity: 0.2,
},
},
},
vintage: {
name: 'vintage',
description: 'Faded retro film look',
ffmpegFilter: 'curves=vintage,eq=saturation=0.9:contrast=0.95',
canvasAdjustments: {
brightness: 5,
contrast: -5,
saturation: 0.9,
hue: 5,
temperature: 15,
colorOverlay: {
r: 250,
g: 240,
b: 230,
opacity: 0.1,
},
},
},
};
/**
* Get filter by name
*/
export function getFilter(name: FilterName): FilterConfig {
return FILTERS[name] || FILTERS.none;
}
/**
* Get FFmpeg filter string for video processing.
* Can be inserted into the filter_complex chain.
*
* @param filterName - Name of the filter to apply
* @param inputLabel - The input label in the filter chain (e.g., '[out]')
* @param outputLabel - The output label in the filter chain (e.g., '[filtered]')
*/
export function getFFmpegFilterString(
filterName: FilterName,
inputLabel: string = '[out]',
outputLabel: string = '[filtered]'
): string {
const filter = getFilter(filterName);
if (!filter.ffmpegFilter) {
return ''; // No filter to apply
}
return `${inputLabel}${filter.ffmpegFilter}${outputLabel}`;
}
/**
* Apply filter adjustments to a canvas context.
* Call this after drawing all content but before encoding.
*
* @param ctx - Canvas 2D rendering context
* @param width - Canvas width
* @param height - Canvas height
* @param filterName - Name of the filter to apply
*/
export function applyCanvasFilter(
ctx: any,
width: number,
height: number,
filterName: FilterName
): void {
const filter = getFilter(filterName);
const adj = filter.canvasAdjustments;
if (filterName === 'none') return;
// Get image data
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
// Apply adjustments pixel by pixel
for (let i = 0; i < data.length; i += 4) {
let r = data[i]!;
let g = data[i + 1]!;
let b = data[i + 2]!;
const a = data[i + 3]!;
// Skip fully transparent pixels
if (a === 0) continue;
// Apply temperature shift (cool = more blue, warm = more red/yellow)
if (adj.temperature !== undefined && adj.temperature !== 0) {
const tempFactor = adj.temperature / 100;
if (tempFactor > 0) {
// Warm: increase red, slightly increase green, decrease blue
r = Math.min(255, r + tempFactor * 30);
g = Math.min(255, g + tempFactor * 10);
b = Math.max(0, b - tempFactor * 20);
} else {
// Cool: decrease red, increase blue
r = Math.max(0, r + tempFactor * 20);
b = Math.min(255, b - tempFactor * 30);
}
}
// Apply saturation
if (adj.saturation !== 1) {
const gray = 0.299 * r + 0.587 * g + 0.114 * b;
r = gray + adj.saturation * (r - gray);
g = gray + adj.saturation * (g - gray);
b = gray + adj.saturation * (b - gray);
}
// Apply brightness
if (adj.brightness !== 0) {
const brightFactor = adj.brightness * 2.55; // Convert -100..100 to -255..255
r += brightFactor;
g += brightFactor;
b += brightFactor;
}
// Apply contrast
if (adj.contrast !== 0) {
const contrastFactor = (259 * (adj.contrast + 255)) / (255 * (259 - adj.contrast));
r = contrastFactor * (r - 128) + 128;
g = contrastFactor * (g - 128) + 128;
b = contrastFactor * (b - 128) + 128;
}
// Apply color overlay (blend)
if (adj.colorOverlay && adj.colorOverlay.opacity > 0) {
const overlay = adj.colorOverlay;
r = r * (1 - overlay.opacity) + overlay.r * overlay.opacity;
g = g * (1 - overlay.opacity) + overlay.g * overlay.opacity;
b = b * (1 - overlay.opacity) + overlay.b * overlay.opacity;
}
// Clamp values
data[i] = Math.max(0, Math.min(255, Math.round(r)));
data[i + 1] = Math.max(0, Math.min(255, Math.round(g)));
data[i + 2] = Math.max(0, Math.min(255, Math.round(b)));
}
// Put modified data back
ctx.putImageData(imageData, 0, 0);
}
/**
* Get all available filter names
*/
export function getAvailableFilters(): FilterName[] {
return Object.keys(FILTERS) as FilterName[];
}