Share_ME/editor.php at main · Saba633/Share_ME · GitHub

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
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Edit your Image</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Import custom stylesheet -->
    <link rel="stylesheet" href="style.css">

    <!-- Compiled and minified JavaScript -->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    </script>
</head>
<style>
.nav-header {
    font-size: 1.5rem;
}

.row {
    margin-bottom: 0;
}

#sourceImage,
.image-controls,
.image-save,
.preset-filters {
    display: none;
}

.image-preview {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#canvas {
    max-height: 420px;
    object-fit: contain;
}

#back-btn {
    width: 100px;
    height: 40px;
    color: white;
    background-color: grey;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    float: right;
    margin-right: 10px;
}

#back-btn:hover {
    background-color: white;
    color: black;
}
</style>

<body style="background-color: rgb(59, 58, 58); color:white;">
    <div style="margin-right:5%;">
        <a href=" ./home.php">
            <button id="back-btn">Go Back</button>
        </a>
    </div>
    <!-- Hidden image that will be used for
	holding the source image -->
    <img id="sourceImage" crossorigin="anonymous">

    <div class="image-preview">

        <!-- Canvas that will hold the
		image to be edited -->
        <canvas id="canvas" height="0"></canvas>
    </div>
    <div class="container app">

        <!-- Text to be shown at the beginning
		of the application -->
        <div class="help-text center-align">
            <h5>Please Upload an Image to Start Editing</h5>
        </div>

        <!-- All the image controls that will be
		used for modifying the image -->
        <div class="image-controls">
            <h6>Image Controls</h6>
            <div class="row">
                <div class="col s6">
                    <span class="range-field">
                        <label for="brightnessSlider">
                            Brightness
                        </label>
                        <input id="brightnessSlider" type="range" value="100" min="0" max="300"
                            onchange="applyFilter()">
                    </span>
                </div>
                <div class="col s6">
                    <span class="range-field">
                        <label for="contrastSlider">
                            Contrast
                        </label>
                        <input id="contrastSlider" type="range" value="100" min="0" max="200" onchange="applyFilter()">
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="col s6">
                    <span class="range-field">
                        <label for="grayscaleSlider">
                            Grayscale
                        </label>
                        <input id="grayscaleSlider" type="range" value="0" min="0" max="100" onchange="applyFilter()">
                    </span>
                </div>
                <div class="col s6">
                    <span class="range-field">
                        <label for="saturationSlider">
                            Saturation
                        </label>
                        <input id="saturationSlider" type="range" value="100" min="0" max="300"
                            onchange="applyFilter()">
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="col s6">
                    <span class="range-field">
                        <label for="sepiaSlider">
                            Sepia
                        </label>
                        <input id="sepiaSlider" type="range" value="0" min="0" max="200" onchange="applyFilter()">
                    </span>
                </div>
                <div class="col s6">
                    <span class="range-field">
                        <label for="hueRotateSlider">
                            Hue
                        </label>
                        <input id="hueRotateSlider" type="range" value="0" min="0" max="360" onchange="applyFilter()">
                    </span>
                </div>
            </div>
        </div>

        <!-- Buttons that will be used to change
		the values to preset ones -->
        <div class="preset-filters">
            <h6>Preset Filters</h6>
            <button class="btn green" onclick="brightenFilter()">
                Brighten
            </button>
            <button class="btn green" onclick="bwFilter()">
                Black and White
            </button>
            <button class="btn green" onclick="funkyFilter()">
                Funky
            </button>
            <button class="btn green" onclick="vintageFilter()">
                Vintage
            </button>
        </div>
        <div class="buttons">
            <ul class="right image-save">
                <button class="btn btn-flat blue white-text" onclick="saveImage()">
                    Save
                </button>
                <button class="btn btn-flat red white-text" onclick="resetImage()">
                    Reset
                </button>
            </ul>
        </div>
        <!-- File control to upload a new file -->
        <div class="file-controls">
            <h6>File Controls</h6>

            <!-- Element that will be later used to download
			the canvas image from code -->
            <a id="link"></a>

            <!-- File Selector for uploading the image -->
            <div class="file-field input-field">
                <div class="btn green">
                    <span>Upload Image</span>
                    <input type="file" accept="image/*" onchange="uploadImage(event)">
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path" type="text">
                </div>
            </div>
        </div>
    </div>

    <!-- Load the script for the editor -->
    <script src="app.js"></script>
    <script>
    // Get the source image to be edited
    let image = document.getElementById('sourceImage');

    // Get the canvas for the edited image
    let canvas = document.getElementById('canvas');

    // Get the 2D context of the image
    let context = canvas.getContext('2d');

    // Get all the sliders of the image
    let brightnessSlider = document.getElementById("brightnessSlider");
    let contrastSlider = document.getElementById("contrastSlider");
    let grayscaleSlider = document.getElementById("grayscaleSlider");
    let hueRotateSlider = document.getElementById("hueRotateSlider");
    let saturateSlider = document.getElementById("saturationSlider");
    let sepiaSlider = document.getElementById("sepiaSlider");

    function uploadImage(event) {

        // Set the source of the image from the uploaded file
        image.src = URL.createObjectURL(event.target.files[0]);

        image.onload = function() {
            // Set the canvas the same width and height of the image
            canvas.width = this.width;
            canvas.height = this.height;
            canvas.crossOrigin = "anonymous";
            applyFilter();
        };

        // Show the image editor controls and hide the help text
        document.querySelector('.help-text').style.display = "none";
        document.querySelector('.image-save').style.display = "block";
        document.querySelector('.image-controls').style.display = "block";
        document.querySelector('.preset-filters').style.display = "block";
    };

    // This function is used to update the image
    // along with all the filter values
    function applyFilter() {

        // Create a string that will contain all the filters
        // to be used for the image
        let filterString =
            "brightness(" + brightnessSlider.value + "%" +
            ") contrast(" + contrastSlider.value + "%" +
            ") grayscale(" + grayscaleSlider.value + "%" +
            ") saturate(" + saturateSlider.value + "%" +
            ") sepia(" + sepiaSlider.value + "%" +
            ") hue-rotate(" + hueRotateSlider.value + "deg" + ")";

        // Apply the filter to the image
        context.filter = filterString;

        // Draw the edited image to canvas
        context.drawImage(image, 0, 0);
    }
    // A series of functions that handle the preset filters
    // Each of these will first reset the image
    // and then apply a certain parameter before
    // redrawing the image
    function brightenFilter() {
        resetImage();
        brightnessSlider.value = 130;
        contrastSlider.value = 120;
        saturateSlider.value = 120;
        applyFilter();
    }

    function bwFilter() {
        resetImage();
        grayscaleSlider.value = 100;
        brightnessSlider.value = 120;
        contrastSlider.value = 120;
        applyFilter();
    }

    function funkyFilter() {
        resetImage();

        // Set a random hue rotation everytime
        hueRotateSlider.value =
            Math.floor(Math.random() * 360) + 1;
        contrastSlider.value = 120;
        applyFilter();
    }

    function vintageFilter() {
        resetImage();
        brightnessSlider.value = 120;
        saturateSlider.value = 120;
        sepiaSlider.value = 150;
        applyFilter();
    }
    // Reset all the slider values to there default values
    function resetImage() {
        brightnessSlider.value = 100;
        contrastSlider.value = 100;
        grayscaleSlider.value = 0;
        hueRotateSlider.value = 0;
        saturateSlider.value = 100;
        sepiaSlider.value = 0;
        applyFilter();
    }

    function saveImage() {
        // Select the temporary element we have created for
        // helping to save the image
        let linkElement = document.getElementById('link');
        linkElement.setAttribute(
            'download', 'edited_image.png'
        );

        // Convert the canvas data to a image data URL
        let canvasData = canvas.toDataURL("image/png")

        // Replace it with a stream so that
        // it starts downloading
        canvasData.replace(
            "image/png", "image/octet-stream"
        )

        // Set the location href to the canvas data
        linkElement.setAttribute('href', canvasData);

        // Click on the link to start the download
        linkElement.click();
    }
    </script>
</body>

</html>