2011-09-08 21:39:29 +00:00
|
|
|
<!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'),
|
2011-09-09 10:41:13 +00:00
|
|
|
button = Ox.element('<input>').attr({type: 'button', value: 'Encode'}).click(function() {
|
2011-09-08 21:39:29 +00:00
|
|
|
button.attr({disabled: 'disabled'})
|
2011-09-09 10:41:13 +00:00
|
|
|
if (button.attr('value') == 'Encode') {
|
|
|
|
|
button.attr({value: 'Encoding...'});
|
2011-09-08 21:39:29 +00:00
|
|
|
encode(function(image) {
|
|
|
|
|
fixmeOxelement = image;
|
2011-09-09 10:41:13 +00:00
|
|
|
button.removeAttr('disabled').attr({value: 'Decode'});
|
2011-09-08 21:39:29 +00:00
|
|
|
});
|
|
|
|
|
} else {
|
2011-09-09 10:41:13 +00:00
|
|
|
button.attr({value: 'Decoding...'});
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
decode(fixmeOxelement, function() {
|
|
|
|
|
button.attr({value: 'Done'})
|
|
|
|
|
});
|
|
|
|
|
}, 0);
|
2011-09-08 21:39:29 +00:00
|
|
|
}
|
|
|
|
|
}).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>
|
