steganography/index.html at master · Austin-Scott/steganography · 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
<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate">
    <title>Steganography Project</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body onload="setHideVisibility()">
    <div id="pageborder">
        <header>
            <h1>Steganography Project</h1>
        </header>
        <section>

            <p>Are you hiding a file inside of an image file or are you finding an already hidden file from an image?</p>
            <div class="border">
                <input type="radio" name="operation" value="hide" checked="true" onchange="setHideVisibility()"> Hide
                <input type="radio" name="operation" value="find" onchange="setHideVisibility()"> Find
            </div>

            <div class="hide" style="display:none">
                <p>Please select the image file you wish to hide your other file inside of.</p>
            </div>
            <div class="find" style="display:none">
                <p>Please select the image file containing the hidden file.</p>
            </div>
            <div class="border">
                <label for="ImageFile" id="ImageLabel">Select Image File</label>
                <input type="file" id="ImageFile" accept=".png,.jpg" onchange="onSelectionChange()">
            </div>

            <div class="hide" style="display:none">
                <p>Please select the image or text file you wish to hide.</p>
                <div class="border">
                    <label for="HiddenFile" id="HiddenLabel" accept=".png,.jpg,.txt">Select Hidden File</label>
                    <input type="file" id="HiddenFile" onchange="onSelectionChange()">
                </div>
            </div>

            <div class="hide" style="display:none">
                <p>Please set greed level. The higher you set this value the more data you can hide but the more distorted the resulting image becomes.</p>
            </div>
            <div class="find" style="display:none">
                <p>Please set greed level. You must use the same greed level you used to hide the hidden file to recover it.</p>
            </div>
            <p id="greedNumber">1</p>
            <span>1</span><input type="range" min="1" max="8" value="1" class="slider" id="greed" onchange="onSelectionChange()"><span>8</span>

            <div class="hide">
                <p>Press "Submit" to hide the file and preview the result below. Press "Save Result" to save the generated image to your disk.</p>
            </div>
            <div class="find">
                <p>Press "Submit" to find the hidden file and preview the result below. Press "Save Result" to save the recovered file to your disk.</p>
            </div>
            <div class="border">
                <button type="button" onclick="execute()">Submit</button>
                <button type="button" onclick="saveResult()">Save Result</button>
            </div>

        </section>
        <br />
        <section>

            <div class="hide" style="display:none">
                <div class="border">
                    <div>
                        <span>Original Color Value: </span><div id="original-rgb"><pre>No data</pre></div>
                        <span>Changed Color Value: </span><div id="changed-rgb"><pre>No data</pre></div>
                    </div>
                    <canvas id="comparison" width=100 height=50 align="center"></canvas>
                    <div>
                        <span id="x-coordinate"></span>
                        <span id="y-coordinate"></span>
                    </div>
                </div>
                <p>Original file:</p>
                <div class="border">
                    <canvas id="original"></canvas>
                </div>
                <p>File with hidden data:</p>
                <div class="border">
                    <canvas id="changed"></canvas>
                </div>
            </div>
            <div class="find" style="display:none">
                <p>Recovered file:</p>
                <div class="border" align="center">
                    <canvas id="recovered"></canvas>
                    <object id="textDisplay" width="800" height="600" style="background-color:white;display:none"></object>
                </div>
            </div>
        </section>
        <footer>
            &copy; 2018 Nicholas LaBelle, Evan Vander Hoeven, Tanner Verber, Brendan Bard, Austin Scott and Connor Fergesen
        </footer>
    </div>

    <!--Library files used by this program.-->
    <script src="js/libraries/download2.js"></script>
    <script src="js/libraries/pako.js"></script>
    <script src="js/libraries/UPNG.js"></script>
    <script src="js/libraries/jpg.js"></script>

    <!--Source files-->
    <!--Contains functions setBit(), isBitSet(), and getByte() for bit manipulation in the low level functions.-->
    <script src="js/bitManipulation.js"></script>
    <!--Contains the BasicImage class that is used by the hideImage(), hideText(), findImage(), and findText() low level functions-->
    <script src="js/BasicImage.js"></script>
    <!--Contains various functions for converting between different data types-->
    <script src="js/typeConvertions.js"></script>
    <!--Low level function for hiding images-->
    <script src="js/hideImage.js"></script>
    <!--Low level function for hiding text-->
    <script src="js/hideText.js"></script>
    <!--Low level function for finding images-->
    <script src="js/findImage.js"></script>
    <!--Low level function for finding text-->
    <script src="js/findText.js"></script>
    <!--High level hide functions-->
    <script src="js/hide.js"></script>
    <!--High level find function-->
    <script src="js/find.js"></script>
    <!--Contains the code for the mouse hover pixel inspector widget.-->
    <script src="js/pixel_zoom.js"></script>
    <!--Contains getHiddenFileType() and drawBlobOnCanvas() functions.-->
    <script src="js/utility.js"></script>

    <!--Main JavaScript Source File-->
    <!--Contains the execute(), saveResult(), onSelectionChange(), and setHideVisibility() functions.-->
    <!--Also contains UI code.-->
    <script src="js/Front.js"></script>

</body>

</html>