JSPhotoEditor/index.html at main · yashimwong/JSPhotoEditor · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&family=Roboto&display=swap" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <title>JSPhoto Editor</title>
</head>
<body>
    <div class="tool-bar">
        <div id="new_image" class="tool"><i class="far fa-image"></i>New Image</div>
        <input id="load_image" type="file" accept="image/*" class="tool">
        <div id="open_save_dialogue" class="tool"><i class="far fa-save"></i>Save Image</div>
    </div>
    <div class="side-bar">
        <div class="tool-group">
            <div id="correction" class="tool"><i class="fas fa-edit"></i>Correction</div>
            <div class="sub-tool">
                <label>Exposure: <input id="exposure" data-filter="brightness" type="range" value="0"></label>
                <label>Contrast: <input id="contrast" type="range" value="0"></label>
            </div>
        </div>
        <div class="tool-group">
            <div id="draw_shapes" class="tool"><i class="fas fa-edit"></i>Draw Shapes</div>
            <div id="circle_tool" class="sub-tool" value="circle">Circle</div>
            <div id="rectangle_tool" class="sub-tool" value="rectangle">Rectangle</div>
            <div id="triangle_tool" class="sub-tool" value="triangle">Triangle</div>
        </div>
        <div class="tool-group">
            <div id="blur_tool" class="tool"><i class="fas fa-quidditch"></i>Blur</div>
            <div class="sub-tool">
                <label>Radius: <input id="blur_radius" type="range" value="0"></label>
                <label>Strength: <input id="blur_strength" type="range" value="0"></label>
            </div>
        </div>
        <div class="tool-group">
            <div id="sharpen_tool" class="tool"><i class="fab fa-codepen"></i>Sharpen</div>
            <div class="sub-tool">
                <label>Strength: <input id="sharpen_strength" type="range" value="0"></label>
            </div>
        </div>
        <div class="tool-group">
            <div id="color_filter_tool" class="tool"><i class="fas fa-palette"></i>Color Filter</div>
            <div class="sub-tool">
                <label>Color: <input id="color_picker" type="color" value="#fdffff"></label>
                <label>Opacity: <input id="color_opacity" type="range" value="0"></label>
            </div>
        </div>
        <div id="clear_all" class="tool"><i class="fas fa-edit"></i>Clear All</div>
    </div>
    <div class="image-canvas">
        <canvas id="canvas"></canvas>
    </div>
    <div id="save_image_modal" class="modal">
        <div class="modal-content">
            <span id="modal_close_btn" class="modal-close">&times;</span>
            Save Image As:
            <select id="image_format">
                <option value="png">png</option>
                <option value="jpeg">jpeg</option>
                <option value="webp">webp</option>
            </select>
            <label id="image_compression_label">Image Compression: <input id="image_compression" type="range" min="0" max="1" step="0.1" value="1"></label>
            <button id="modal_save_btn">Save</button>
            <button id="modal_cancel_btn">Cancel</button>
        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="js/draw.js"></script>
    <script src="https://kit.fontawesome.com/647d4d2c3c.js" crossorigin="anonymous"></script>
</body>
</html>