-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (137 loc) · 5.35 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
146
147
148
<!--
/*
* Copyright (C) 2023 Hyun Seo
* Licensed under MIT
*/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Steganographer demo</title>
<style>
html, body {
font-family: sans-serif;
}
div {
margin: 0 0 2rem 0;
}
h3, h4 {
margin: 0 0 1rem 0;
padding: 0;
}
.image {
display: block;
width: 400px;
height: 400px;
object-fit: contain;
background-color: black;
color: white;
}
</style>
</head>
<body>
<div>
<h3>Encoder</h3>
<div>
<h4>Encoder Image Input</h4>
<div>
<input id="encoder-input-image" type="file" accept=".png,.gif,.jpg,.jpeg,.bmp,.tif,.tiff">
<br>
<textarea id="encoder-input-text" placeholder="Type text here"></textarea>
</div>
<div>
<h4>Encoder Input Preview</h4>
<img class="image" id="encoder-input-image-preview" src="#" alt="No image added">
<button id="encoder-start">Encode</button>
</div>
</div>
<div>
<h4>Encoder Output</h4>
<img class="image" id="encoder-output-image" src="#" alt="No image added">
<a id="encoder-output-download" href="#" download>Download output</a>
</div>
</div>
<hr>
<div>
<h3>Decoder</h3>
<div>
<h4>Decoder Image Input</h4>
<div>
<input id="decoder-input-image" type="file" accept=".png,.gif,.jpg,.jpeg,.bmp,.tif,.tiff">
</div>
<div>
<h4>Decoder Input Preview</h4>
<img class="image" id="decoder-input-image-preview" src="#" alt="No image added">
<button id="decoder-start">Decode</button>
</div>
</div>
<div>
<h4>Decoder Output</h4>
<textarea readonly placeholder="Decoded text will show here" id="decoder-output-text"></textarea>
</div>
</div>
<script>
const state = {
encoderInputImageURL: null,
encoderInputText: null,
encoderOutputImageURL: null,
decoderInputImageURL: null,
decoderOutputText: null
}
const encoderInputImageEl = document.getElementById('encoder-input-image');
const encoderInputImagePreviewEl = document.getElementById('encoder-input-image-preview');
encoderInputImageEl.addEventListener('change', e => {
const [file] = e.target.files;
if (file) {
state.encoderInputImageURL = URL.createObjectURL(file);
encoderInputImagePreviewEl.src = state.encoderInputImageURL;
}
});
const encoderStartEl = document.getElementById('encoder-start');
const encoderInputText = document.getElementById('encoder-input-text');
encoderInputText.addEventListener('change', e => {
state.encoderInputText = e.target.value;
})
const encoderOutputImageEl = document.getElementById('encoder-output-image');
const encoderOutputDownloadEl = document.getElementById('encoder-output-download');
encoderStartEl.addEventListener('click', () => {
if (state.encoderInputText && state.encoderInputImageURL) {
Steg.encode(state.encoderInputText, state.encoderInputImageURL).then((url) => {
state.encoderOutputImageURL = url;
encoderOutputImageEl.src = state.encoderOutputImageURL;
encoderOutputDownloadEl.href = state.encoderOutputImageURL;
});
} else {
alert('Please select an image & type in a message to encode.');
}
})
encoderOutputDownloadEl.addEventListener('click', e => {
if (encoderOutputDownloadEl.href === '#') {
e.preventDefault();
}
})
const decoderInputImageEl = document.getElementById('decoder-input-image');
const decoderInputImagePreviewEl = document.getElementById('decoder-input-image-preview');
decoderInputImageEl.addEventListener('change', e => {
const [file] = e.target.files;
if (file) {
state.decoderInputImageURL = URL.createObjectURL(file);
decoderInputImagePreviewEl.src = state.decoderInputImageURL;
}
})
const decoderStartEl = document.getElementById('decoder-start');
const decoderOutputTextEl = document.getElementById('decoder-output-text');
decoderStartEl.addEventListener('click', () => {
if (state.decoderInputImageURL) {
Steg.decode(state.decoderInputImageURL).then((str) => {
state.decoderOutputText = str;
decoderOutputTextEl.value = state.decoderOutputText;
})
} else {
alert('Please select an image to decode.')
}
})
</script>
</body>
</html>