adding image demo

2011-09-08 21:39:29 +00:00 · 2011-09-08 21:39:29 +00:00 · 7bf42e5b0b
commit 7bf42e5b0b
parent 1e38ff6b9e
3 changed files with 64 additions and 0 deletions
--- a/demos/image2/index.html
+++ b/demos/image2/index.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OxJS Image Encode Demo</title
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <script type="text/javascript" src="../../build/Ox.js"></script>
+        <script>
+Ox.load('Image', function() {
+    var fixmeOxelement;
+    var body = Ox.element('body'),
+        button = Ox.element('<input>').attr({type: 'button', value: 'encode'}).click(function() {
+            button.attr({disabled: 'disabled'})
+            if (button.attr('value') == 'encode') {
+                button.attr({value: 'encoding...'});
+                encode(function(image) {
+                    fixmeOxelement = image;
+                    button.removeAttr('disabled').attr({value: 'decode'});
+                });                
+            } else {
+                button.attr({value: 'decoding...'});
+                decode(fixmeOxelement, function() {
+                    button.attr({value: 'done'})
+                });
+            }
+        }).appendTo(body);
+    Ox.element('<br>').appendTo(body);
+    function encode(callback) {
+        var lines = [
+            'The first image he told me about was of three children on a road in Iceland in 1965.',
+            '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.'
+        ];
+        Ox.Image('png/vietnam.png', function(vietnam) {
+            vietnam.encode(lines[1], false, 1, function(vietnam) {
+                Ox.Image('png/iceland.png', function(iceland){
+                    iceland.encode(lines[0], false, 1, function(iceland) {
+                        Ox.print('src.length', vietnam.src().length)
+                        iceland.encode(vietnam.src(), -1, function(image) {
+                            Ox.element('<img>').attr({src: image.src()}).appendTo(body);
+                            callback(image);
+                        });
+                    });
+                });
+            });
+        });
+    }
+    function decode(iceland, callback) {
+        iceland.decode(false, 1, function(str) {
+            Ox.element('<div>').html(str).appendTo(body);
+            iceland.decode(-1, function(src) {
+                Ox.element('<img>').attr({src: src}).appendTo(body);
+                Ox.Image(src, function(vietnam) {
+                    vietnam.decode(false, 1, function(str) {
+                        Ox.element('<div>').html(str).appendTo(body);
+                        callback();
+                    });
+                });
+            });
+        });
+    }
+});
+        </script>
+    </head>
+    <body></body>
+</html>
--- a/demos/image2/png/iceland.png
+++ b/demos/image2/png/iceland.png
--- a/demos/image2/png/vietnam.png
+++ b/demos/image2/png/vietnam.png