add steganograpy example

2012-04-13 23:22:56 +02:00 · 2012-04-13 23:22:56 +02:00 · 036d51e7b5
commit 036d51e7b5
parent 37f3bf8f51
5 changed files with 127 additions and 0 deletions
--- a/examples/steganography/css/example.css
+++ b/examples/steganography/css/example.css
@ -0,0 +1,17 @@
+body {
+    margin: 0;
+}
+table {
+    border-spacing: 8px;
+}
+td {
+    padding: 0;
+    border-collapse: collapse;
+    font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    vertical-align: top;
+    //background: red;
+}
+td:first-child {
+    width: 320px;
+}
--- a/examples/steganography/index.html
+++ b/examples/steganography/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Steganograpy</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
+        <link rel="stylesheet" type="text/css" href="css/example.css"/>
+        <script type="text/javascript" src="../../dev/Ox.js"></script>
+        <script type="text/javascript" src="js/example.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
--- a/examples/steganography/js/example.js
+++ b/examples/steganography/js/example.js
@ -0,0 +1,97 @@
+'use strict';
+
+Ox.load('Image', function() {
+
+    var $body = Ox.$('body'),
+        $table = Ox.$('<table>').appendTo($body),
+        $tr,
+        text = {
+            iceland: 'The first image he told me about '
+                + 'was of three children on a road in Iceland in 1965.',
+            vietnam: 'He said for him it was the image of happiness, '
+                + 'and that he had often tried to link it to other images, '
+                + 'but it had never worked.'
+        },
+        i = 0;
+
+    encode(decode);
+
+    function encode(callback) {
+        status('Load iceland.png');
+        Ox.Image('png/iceland.png', function(iceland) {
+            result(Ox.$('<img>').attr({src: iceland.src()}));
+            status(
+                'Encode the text <i>"' + text.iceland + '"</i> into '
+                + 'the least significant bits of iceland.png'
+            );
+            iceland.encode(text.iceland, false, 1, function(iceland) {
+                result(Ox.$('<img>').attr({src: iceland.src()}));
+                status('Load vietnam.png');
+                Ox.Image('png/vietnam.png', function(vietnam) {
+                    result(Ox.$('<img>').attr({src: vietnam.src()}));
+                    status(
+                        'Encode the text <i>"' + text.vietnam + '"</i> into'
+                        + ' the least significant bits of vietnam.png'
+                    );
+                    vietnam.encode(text.vietnam, false, 1, function(vietnam) {
+                        result(Ox.$('<img>').attr({src: vietnam.src()}));
+                        status(
+                            'Encode vietnam.png into iceland.png '
+                            + 'by flipping the second least significant bits'
+                        );
+                        iceland.encode(vietnam.src(), -1, function(iceland) {
+                            result(Ox.$('<img>').attr({src: iceland.src()}));
+                            callback(iceland);
+                        });
+                    });
+                });
+            });
+        });
+    }
+
+    function decode(iceland) {
+        status('Decode the least signigicant bits of iceland.png');
+        iceland.decode(false, 1, function(str) {
+            result(str);
+            status('Decode all bits of iceland.png');
+            iceland.decode(-1, function(src) {
+                result(
+                    Ox.sub(src, 0, 32) + '<i> ... ['
+                    + Ox.formatNumber(src.length - 64)
+                    + ' more bytes] ... </i>' + Ox.sub(src, -32)
+                );
+                status('Load as vietnam.png');
+                Ox.Image(src, function(image) {
+                    result(Ox.$('<img>').attr({src: src}));
+                    status('Decode the least significant bits of vietnam.png');
+                    image.decode(false, 1, function(str) {
+                        result(str);
+                    });
+                });
+            });
+        });
+    }
+
+    function status(value) {
+        var $td = Ox.$('<td>');
+        if (Ox.isString(value)) {
+            $td.html(
+                value.replace(/(\w+\.png)/g, '<b>$1</b>')
+            );
+        } else {
+            $td.append(value);
+        }
+        $tr = Ox.$('<tr>').append($td).appendTo($table);
+    }
+
+    function result(value) {
+        var $td = Ox.$('<td>');
+        if (Ox.isString(value)) {
+            $td.html(value);
+        } else {
+            $td.append(value);
+        }
+        $tr.append($td)
+    }
+
+});
--- a/examples/steganography/png/iceland.png
+++ b/examples/steganography/png/iceland.png
--- a/examples/steganography/png/vietnam.png
+++ b/examples/steganography/png/vietnam.png