Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add example

  • Loading branch information...
commit 6ae932e0c8d819ccdae885a0e6114c5aead7a237 1 parent 9fc3524
@hughsk authored
View
1  .gitignore
@@ -1 +1,2 @@
node_modules
+bundle.js
View
64 example.js
@@ -0,0 +1,64 @@
+var debounce = require('debounce')
+ , lsb = require('./')
+ , encode = lsb.encode
+ , decode = lsb.decode
+
+var input = document.getElementById('input').getContext('2d')
+ , output = document.getElementById('output').getContext('2d')
+ , highlighted = document.getElementById('highlighted').getContext('2d')
+ , enlarged = document.getElementById('enlarged').getContext('2d')
+ , textarea = document.getElementById('text')
+
+;[input, output, highlighted, enlarged].forEach(function(c) {
+ c.canvas.width = 256
+ c.canvas.height = 256
+})
+
+var lenna = new Image
+lenna.onload = function() {
+ ;[input, output].forEach(function(c) {
+ c.drawImage(lenna, 0, 0, c.canvas.width, c.canvas.height)
+ })
+ updateText()
+}
+lenna.src = 'img/lenna.png'
+
+textarea.onkeyup =
+textarea.onchange = updateText
+
+function updateText() {
+ var stegotext = textarea.value + ''
+ , imageData = input.getImageData(0, 0, input.canvas.width, input.canvas.height)
+
+ // Encode image data - ignoring the alpha channel
+ // as it would interfere with the RGB channels
+ function rgb(n) {
+ return n + (n/3)|0
+ }
+ encode(imageData.data, stegotext, rgb)
+
+ output.putImageData(imageData, 0, 0)
+
+ // Highlight LSBs
+ for (var i = rgb(4), l = imageData.data.length; i < l; i += 1) {
+ imageData.data[i] = imageData.data[i] & 1 ? 255 : 0
+ }
+ highlighted.putImageData(imageData, 0, 0)
+
+ // Enlarge the first 100 bits of the image,
+ // with R/G/B on seperate pixels
+ for (var x = 0; x < 64; x += 1) {
+ for (var y = 0; y < 64; y += 1) {
+ var val = imageData.data[rgb(x+y*64)]
+
+ enlarged.fillStyle = 'rgb('
+ + val + ','
+ + val + ','
+ + val + ')'
+
+ enlarged.fillRect(x * 8, y * 8, 8, 8)
+ }
+ }
+}
+
+updateText = debounce(updateText, 50, true)
View
BIN  img/lenna.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
68 index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <title>LSB Example</title>
+ <style type="text/css">
+ .display {
+ position:absolute;
+ top:50%; left:50%;
+ }
+ #wrapper {
+ position:absolute;
+ top:0; left:0;
+ width:100%; height:100%;
+ margin-left:-128px;
+ }
+ #input {
+ margin-left:-256px;
+ margin-top:-256px;
+ }
+ #output {
+ margin-top:-256px;
+ }
+ #enlarged {
+ margin-left:-256px;
+ }
+ #unwrapped {
+ margin-left:138px;
+ margin-top:10px;
+ }
+ #text {
+ width:256px; height:512px;
+ margin:0; padding-left:20px;
+ overflow:hidden;
+ outline:0; border:0; color:#777;
+ font-family:'Ubuntu Mono', Monaco, 'Lucida Console', 'Courier New', Courier, monospace;
+ font-size:13px;
+ position:absolute;
+ top:50%; left:50%;
+ margin-top:-256px;
+ margin-left:256px;
+ }
+ </style>
+ </head>
+ <body>
+ <a href="https://github.com/hughsk/lsb"><img style="position: absolute; top: -20px; right: -20px; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+ <div id="wrapper">
+ <canvas class="display" id="input"></canvas>
+ <canvas class="display" id="output"></canvas>
+ <canvas class="display" id="enlarged"></canvas>
+ <canvas class="display" id="highlighted"></canvas>
+<textarea id="text">The text here is hidden in the image on the top-right-hand side.
+
+The top-left image is the original. Can't tell the difference, right?
+
+That's thanks to steganography - we're embedding bits of the text by changing the brightness of its pixels *ever* so slightly.
+
+Go ahead and type something here, and watch the images change.
+
+The bottom-left image is the text as a binary grid, and the bottom-right image is an amplification of the changes we're making.
+</textarea>
+ </div>
+ <script src="/bundle.js"></script>
+ </body>
+</html>
View
3  package.json
@@ -5,7 +5,8 @@
"main": "index.js",
"devDependencies": {
"clone": "~0.1.6",
- "tape": "~0.2.2"
+ "tape": "~0.2.2",
+ "debounce": "0.0.1"
},
"scripts": {
"test": "node test.js"
Please sign in to comment.
Something went wrong with that request. Please try again.