add steganograpy example

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)
+    }
+
+});