-
Notifications
You must be signed in to change notification settings - Fork 27
Expand file tree
/
Copy pathscript.js
More file actions
239 lines (216 loc) · 7.06 KB
/
Copy pathscript.js
File metadata and controls
239 lines (216 loc) · 7.06 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
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
const fileName = 'edited-image';
let brightness = 0;
let contrast = 0;
let saturation = 0;
let vibrance = 0;
// Handle file upload
document.getElementById('upload-file').addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
img.src = event.target.result;
};
if (file) {
reader.readAsDataURL(file);
}
});
// Helper function to clamp values
const clamp = (value) => Math.min(Math.max(value, 0), 255);
// Draw image to canvas
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
// Redraw image with current adjustments
const drawImage = () => {
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const { data } = imageData;
// Apply brightness
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] + brightness); // Red
data[i + 1] = clamp(data[i + 1] + brightness); // Green
data[i + 2] = clamp(data[i + 2] + brightness); // Blue
}
// Apply contrast
const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(factor * (data[i] - 128) + 128); // Red
data[i + 1] = clamp(factor * (data[i + 1] - 128) + 128); // Green
data[i + 2] = clamp(factor * (data[i + 2] - 128) + 128); // Blue
}
// Apply saturation
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = clamp(avg + (data[i] - avg) * (1 + saturation / 100)); // Red
data[i + 1] = clamp(avg + (data[i + 1] - avg) * (1 + saturation / 100)); // Green
data[i + 2] = clamp(avg + (data[i + 2] - avg) * (1 + saturation / 100)); // Blue
}
// Apply vibrance
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
const max = Math.max(data[i], data[i + 1], data[i + 2]);
const amount = (((max - avg) * 2) / 255) * vibrance;
data[i] = clamp(data[i] + amount); // Red
data[i + 1] = clamp(data[i + 1] + amount); // Green
data[i + 2] = clamp(data[i + 2] + amount); // Blue
}
ctx.putImageData(imageData, 0, 0);
};
// Apply brightness
const applyBrightness = (value) => {
brightness += value;
drawImage();
};
// Apply contrast
const applyContrast = (value) => {
contrast += value;
drawImage();
};
// Apply saturation
const applySaturation = (value) => {
saturation += value;
drawImage();
};
// Apply vibrance
const applyVibrance = (value) => {
vibrance += value;
drawImage();
};
// Apply effect
const applyEffect = (effect) => {
drawImage();
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const { data } = imageData;
if (effect === 'vintage') {
// Vintage effect
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] * 0.9); // Red
data[i + 1] = clamp(data[i + 1] * 0.7); // Green
data[i + 2] = clamp(data[i + 2] * 0.5); // Blue
}
} else if (effect === 'lomo') {
// Lomo effect
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] * 1.2); // Red
data[i + 1] = clamp(data[i + 1] * 1.2); // Green
data[i + 2] = clamp(data[i + 2] * 1.2); // Blue
}
} else if (effect === 'clarity') {
// Clarity effect
// (Increase contrast)
applyContrast(20);
} else if (effect === 'sincity') {
// Sin City effect
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // Red
data[i + 1] = avg; // Green
data[i + 2] = avg; // Blue
}
} else if (effect === 'crossprocess') {
// Cross Process effect
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] * 1.3); // Red
data[i + 1] = clamp(data[i + 1] * 1.1); // Green
data[i + 2] = clamp(data[i + 2] * 0.9); // Blue
}
} else if (effect === 'pinhole') {
// Pinhole effect
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg * 0.9; // Red
data[i + 1] = avg * 0.9; // Green
data[i + 2] = avg * 0.9; // Blue
}
} else if (effect === 'nostalgia') {
// Nostalgia effect
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] * 0.9 + 50); // Red
data[i + 1] = clamp(data[i + 1] * 0.7 + 20); // Green
data[i + 2] = clamp(data[i + 2] * 0.5 + 10); // Blue
}
} else if (effect === 'hermajesty') {
// Her Majesty effect
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] * 1.1); // Red
data[i + 1] = clamp(data[i + 1] * 0.95); // Green
data[i + 2] = clamp(data[i + 2] * 1.3); // Blue
}
}
ctx.putImageData(imageData, 0, 0);
};
// Download image
const downloadImage = () => {
const link = document.createElement('a');
link.download = fileName;
link.href = canvas.toDataURL('image/jpeg');
link.click();
};
// Revert filters
const revertFilters = () => {
brightness = 0;
contrast = 0;
saturation = 0;
vibrance = 0;
drawImage();
};
// Event listeners for filter buttons
document
.querySelector('.brightness-add')
.addEventListener('click', () => applyBrightness(10));
document
.querySelector('.brightness-remove')
.addEventListener('click', () => applyBrightness(-10));
document
.querySelector('.contrast-add')
.addEventListener('click', () => applyContrast(10));
document
.querySelector('.contrast-remove')
.addEventListener('click', () => applyContrast(-10));
document
.querySelector('.saturation-add')
.addEventListener('click', () => applySaturation(10));
document
.querySelector('.saturation-remove')
.addEventListener('click', () => applySaturation(-10));
document
.querySelector('.vibrance-add')
.addEventListener('click', () => applyVibrance(10));
document
.querySelector('.vibrance-remove')
.addEventListener('click', () => applyVibrance(-10));
// Event listeners for effect buttons
document
.querySelector('.vintage-add')
.addEventListener('click', () => applyEffect('vintage'));
document
.querySelector('.lomo-add')
.addEventListener('click', () => applyEffect('lomo'));
document
.querySelector('.clarity-add')
.addEventListener('click', () => applyEffect('clarity'));
document
.querySelector('.sincity-add')
.addEventListener('click', () => applyEffect('sincity'));
document
.querySelector('.crossprocess-add')
.addEventListener('click', () => applyEffect('crossprocess'));
document
.querySelector('.pinhole-add')
.addEventListener('click', () => applyEffect('pinhole'));
document
.querySelector('.nostalgia-add')
.addEventListener('click', () => applyEffect('nostalgia'));
document
.querySelector('.hermajesty-add')
.addEventListener('click', () => applyEffect('hermajesty'));
// Event listeners for download and revert buttons
document
.getElementById('download-btn')
.addEventListener('click', downloadImage);
document.getElementById('revert-btn').addEventListener('click', revertFilters);