-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (123 loc) · 8.79 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Image Steganography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="title=" content="Image Steganography">
<meta name="robots" content="index, follow">
<meta name="description" content="Use Image Steganography to easily encode or decode secret information to or from an image">
<meta name="keywords" content="image steganography, steganography, encode, decode, encrypt, decrypt, secret, secret information">
<meta name="theme-color" content="#ccc">
<meta name="msapplication-navbutton-color" content="#ccc">
<meta name="apple-mobile-web-app-status-bar-style" content="#ccc">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1><i class="fas fa-image"></i> Image Steganography <i class="fas fa-user-secret"></i></h1>
<button title="Convert between text and binary" class="btn btn-sm btn-default" data-toggle="modal" data-target="#convertModal"><i class="fas fa-exchange-alt"></i> Text-Binary Convert</button>
<button title="Read info on image steganography" class="btn btn-sm btn-default" data-toggle="modal" data-target="#infoModal"><i class="fas fa-info"></i> Info</button>
<button title="Encode and decode settings" class="btn btn-sm btn-default" data-toggle="modal" data-target="#settingsModal"><i class="fas fa-cog"></i> Settings</button>
<hr>
<label id="uploadButton" class="btn btn-default btn-lg">
<i class="fas fa-upload"></i> Upload Image <i class="fas fa-file-image"></i><input hidden autofocus id="input" type="file" accept="image/*" class="form-control input-sm">
</label>
Binary to Encode: <textarea id="textarea1" class="form-control">01100011011000010111010001110011</textarea><br>
Binary Decoded: <textarea id="textarea2" class="form-control"></textarea><br>
<button id="btn1" title="Set image data to entered binary to encode" class="btn btn-sm btn-primary"><i class="fas fa-eye-slash"></i> Encode <i class="fas fa-arrow-circle-right"></i></button>
<button id="btn2" title="get image data from upload image into decoded binary" class="btn btn-sm btn-primary"><i class="fas fa-eye"></i> Decode <i class="fas fa-arrow-circle-left"></i></button><br><br>
Uploaded Image:<br>
<canvas id="canvas"></canvas><br>
Encoded Image:<br>
<canvas id="canvas2"></canvas><br>
<button id="downloadButton" title="Download encoded image" class="btn btn-sm btn-default"><i class="fas fa-download"></i> Download Image <i class="fas fa-file-image"></i></button><br>
<a download="test.png" id="downloadLink"></a><br>
<div class="modal fade" id="convertModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-exchange-alt"></i> Convert Between Text and Binary</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Input:<br>
<textarea id="convertInput" class="form-control"></textarea><br>
<label><input id="convertCheckbox" type="checkbox">Binary to Text</label><br>
<label><input id="fillCheckbox" type="checkbox">Fill Binary Result into Binary Input</label><br>
<button id="getBinaryButton" disabled="true" class="btn btn-sm btn-default">Get Binary from Decoded Binary Input</button><br>
<button id="convertButton" class="btn btn-sm btn-primary"><i class="fas fa-exchange-alt"></i> Convert</button><br>
Output:<br>
<textarea id="convertOutput" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="modal fade" id="infoModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-info"></i> Info About Image Steganography</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h5>About Image Steganography</h5>
Image Steganography is the process of encoding information inside of an image.<br><br>
Images each contain many (often millions) of pixels, each of which is a square of a single color.<br><br>
Each color can be one of over 17 million different values, as expressed in the RGB color model.<br><br>
RGB stands for red, green, and blue, which are the primary colors of light.<br><br>
Each color has a value for red between 0 and 255, as well as green and blue.<br><br>
255 is used because 0-255 includes 256 numbers, which is 2^8, meaning each color takes 8 1s or 0s, or 8 bits, which is 1 byte.<br><br>
Binary works the same way decimal (base 10) does, where the least significant digits are on the right.<br><br>
Except in binary each digit's place are powers of 2, not powers of 10. So if the last digit or two are changed, the number remains very similar.<br><br>
It would be within 0 or 1 of the original number if only 1 bit is changed, and within 3 of the original number if 2 bits are changed.<br><br>
These changes (especially changing only 1 bit) are rather insignificant when comapred to the entire number being between 0 and 255.<br><br>
If changed these changes would not appear visable to the human eye.<br><br>
If we go through each one of the millions of pixels in an image, and set the least significant digits to either a 0 or 1 of our choice, we've sucessfully encoded binary information.<br><br>
This means that when read, we can get those 0s and 1s, or bits (binary digits) back.<br><br>
Computers use binary to represent all information, including text, images, and more, so we can encode any information this way, as long as it fits within the image size.<br><br>
<h5>Try It!</h5>
To encode information, first upload your image, set the binary to encode, and click the "Encode" button. Download your image to save the result.<br><br>
If you'd like to encode text information, use the "Text Binary Convert" button, enter the text under "Input", and click "Convert" to get the output in binary under "Output".<br><br>
Check "Fill Binary Result into Binary Input" if you'd like to automatically fill it instead of copying and pasting
<hr>
To decode information, first upload your image, then click the "Decode" button. Be patient for a few seconds while the "Binary Decoded" text fills up with your decoded information.<br><br>
To convert the decoded binary into text, use the "Text Binary Convert" button, check the "Binary to Text" checkbox, and click "Convert".<br><br>
Click the "Get Binary from Decoded Binary Input" button to get the binary information you decoded instead of copying and pasting. The "Binary to Text" checkbox must be checked to use this feature.<br><br>
<h5>About this Tool</h5>
When decoding or getting binary from input, it may take a while because the user interface is dealing with millions of characters of text.<br><br>
For most images, it should take less than 10 seconds<br><br>
Loading the image and encoding however, is a much faster process and should happen almost immediately<br><br>
Click the "Get Binary from Decoded Binary Input" button to get the binary information you decoded instead of copying and pasting. The "Binary to Text" checkbox must be checked to use this feature.<br><br>
</div>
</div>
</div>
</div>
<div class="modal fade" id="settingsModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-cog"></i> Settings</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label><input id="rCheckbox" checked type="checkbox">Encode/Decode Reds</label><br>
<label><input id="gCheckbox" checked type="checkbox">Encode/Decode Greens</label><br>
<label><input id="bCheckbox" checked type="checkbox">Encode/Decode Blues</label><br>
Remaining Bits:
<select class="form-control" id="remainingSelect">
<option value="-1">Leave as is</option>
<option value="0">Make 0s</option>
<option value="1">Make 1s</option>
<option value="2">Make random</option>
</select>
</div>
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>