-
Notifications
You must be signed in to change notification settings - Fork 0
/
encode.html
75 lines (62 loc) · 3.52 KB
/
encode.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>They Live Steganography - Encode Image</title>
<link rel="stylesheet" href="css/encode.css">
</head>
<body>
<h1>Encode an Image</h1>
<p>Use this page to hide one image inside another image using <a href="index.html">They Live Steganography</a>. Currently this works in Firefox and Chrome.</p>
<h2>Instructions</h2>
<p>You will need <strong>2</strong> images. One image will be your hidden message. The other image will be a <em>facade</em> -- the image that everyone sees. It works best if the facade image is at least as tall and as wide as your hidden message. If your facade image is too small, some of your hidden message will get cut off.</p>
<p>You will need to drag-and-drop the images from your computer. For example, drag files from the Desktop, or from File Explorer (Windows) or Finder (Mac). Drag-and-drop the image file with your hidden message onto the <strong>hidden image target</strong>, and drag-and-drop the image file with your <em>facade</em> image onto the <strong>facade image target</strong>.</p>
<p>Need to create images for your hidden message or your facade image? Try <a href="http://www.text2image.com">text2image.com</a> or the <a href="https://imgflip.com/memegenerator">imgflip Meme Generator</a> (select the "Private" option when using imgflip).</p>
<div id="controls">
<div id="codeContainer">
<h3>Hidden Image Target</h3>
<div id="codedrop"
ondragenter="document.getElementById('codedrop').textContent = ''; event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault();
THEYLIVE.processDrop(event);">
</div>
<div id="codeData"></div>
</div>
<div id="keyContainer">
<h3>Default Key</h3>
<a href="#" id="keydrop"
onclick="THEYLIVE.toggleKey(); return false;"
ondragenter="event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault(); THEYLIVE.processDrop(event);">Enable Custom Key</a>
<div id="keyData"></div>
</div>
<div id="facadeContainer">
<h3>Facade Image Target</h3>
<div id="facadedrop"
ondragenter="document.getElementById('facadedrop').textContent = ''; event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault();
THEYLIVE.processDrop(event);">
</div>
<div id="facadeData"></div>
</div>
</div>
<h2>Results</h2>
<div id="code"><h3>Hidden Image</h3><h4>(converted to black and white)</h4></div>
<div id="facade"><h3>Facade Image</h3><h4>(the image to contain the hidden image)</h4></div>
<div id="result"><h3>Combined Image</h3><h4>(right-click and select "Save Image As...")</h4></div>
<div id="key"><h3>Key Image</h3><h4>(save if using a custom key)</h4></div>
<script src="js/encode.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-19082249-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>