@@ -12,7 +12,7 @@ document.getElementById('upload-file').addEventListener('change', (e) => {
12
12
const file = e . target . files [ 0 ] ;
13
13
const reader = new FileReader ( ) ;
14
14
15
- reader . onload = function ( event ) {
15
+ reader . onload = ( event ) => {
16
16
img . src = event . target . result ;
17
17
} ;
18
18
@@ -22,19 +22,17 @@ document.getElementById('upload-file').addEventListener('change', (e) => {
22
22
} ) ;
23
23
24
24
// Helper function to clamp values
25
- function clamp ( value ) {
26
- return Math . min ( Math . max ( value , 0 ) , 255 ) ;
27
- }
25
+ const clamp = ( value ) => Math . min ( Math . max ( value , 0 ) , 255 ) ;
28
26
29
27
// Draw image to canvas
30
- img . onload = function ( ) {
28
+ img . onload = ( ) => {
31
29
canvas . width = img . width ;
32
30
canvas . height = img . height ;
33
31
ctx . drawImage ( img , 0 , 0 ) ;
34
32
} ;
35
33
36
34
// Redraw image with current adjustments
37
- function drawImage ( ) {
35
+ const drawImage = ( ) => {
38
36
ctx . drawImage ( img , 0 , 0 ) ;
39
37
const imageData = ctx . getImageData ( 0 , 0 , canvas . width , canvas . height ) ;
40
38
const { data } = imageData ;
@@ -72,34 +70,34 @@ function drawImage() {
72
70
data [ i + 2 ] = clamp ( data [ i + 2 ] + amount ) ; // Blue
73
71
}
74
72
ctx . putImageData ( imageData , 0 , 0 ) ;
75
- }
73
+ } ;
76
74
77
75
// Apply brightness
78
- function applyBrightness ( value ) {
76
+ const applyBrightness = ( value ) => {
79
77
brightness += value ;
80
78
drawImage ( ) ;
81
- }
79
+ } ;
82
80
83
81
// Apply contrast
84
- function applyContrast ( value ) {
82
+ const applyContrast = ( value ) => {
85
83
contrast += value ;
86
84
drawImage ( ) ;
87
- }
85
+ } ;
88
86
89
87
// Apply saturation
90
- function applySaturation ( value ) {
88
+ const applySaturation = ( value ) => {
91
89
saturation += value ;
92
90
drawImage ( ) ;
93
- }
91
+ } ;
94
92
95
93
// Apply vibrance
96
- function applyVibrance ( value ) {
94
+ const applyVibrance = ( value ) => {
97
95
vibrance += value ;
98
96
drawImage ( ) ;
99
- }
97
+ } ;
100
98
101
99
// Apply effect
102
- function applyEffect ( effect ) {
100
+ const applyEffect = ( effect ) => {
103
101
drawImage ( ) ;
104
102
const imageData = ctx . getImageData ( 0 , 0 , canvas . width , canvas . height ) ;
105
103
const { data } = imageData ;
@@ -162,24 +160,24 @@ function applyEffect(effect) {
162
160
}
163
161
164
162
ctx . putImageData ( imageData , 0 , 0 ) ;
165
- }
163
+ } ;
166
164
167
165
// Download image
168
- function downloadImage ( ) {
166
+ const downloadImage = ( ) => {
169
167
const link = document . createElement ( 'a' ) ;
170
168
link . download = fileName ;
171
169
link . href = canvas . toDataURL ( 'image/jpeg' ) ;
172
170
link . click ( ) ;
173
- }
171
+ } ;
174
172
175
173
// Revert filters
176
- function revertFilters ( ) {
174
+ const revertFilters = ( ) => {
177
175
brightness = 0 ;
178
176
contrast = 0 ;
179
177
saturation = 0 ;
180
178
vibrance = 0 ;
181
179
drawImage ( ) ;
182
- }
180
+ } ;
183
181
184
182
// Event listeners for filter buttons
185
183
document
0 commit comments