oxjs/demos/image/js/image.js

Ox.load('Image', function() {

    // see http://en.wikipedia.org/wiki/Lenna

    Ox.Image('png/Lenna.png', function(image) {
        var body = Ox.element('body'),
            select = Ox.element('<select>').appendTo(body);
        [
            'Method...', 'blur(1)', 'blur(5)',
            'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
            'channel("h")', 'channel("s")', 'channel("l")',
            'contour()',
            'depth(1)', 'depth(2)', 'depth(4)',
            'edges()', 'emboss()',
            'encode("secret")', 'decode()',
            'encode("secret", false)', 'decode(false)',
            'encode("secret", 1)', 'decode(1)',
            'encode("secret", false, 15)', 'decode(false, 15)',
            'encode("secret", 127)', 'decode(127)',
            'hue(-60)', 'hue(60)',
            'invert()',
            'lightness(-0.5)', 'lightness(0.5)',
            'mosaic(4)', 'motionBlur()', 'photocopy()', 'posterize()',
            'resize(256, 256)', 'resize(512, 512)',
            'saturation(-0.5)', 'saturation(0.5)',
            'scale(0.5, -1)',
            'sharpen()', 'solarize()',
            'src("png/Lenna.png")', 'src("png/OxJS.png")'
        ].forEach(function(filter) {
            Ox.element('<option>').html(filter).appendTo(select);
        });
        select[0].onchange = function() {
            if (select[0].value[0] == select[0].value[0].toLowerCase()) {
                var split = select[0].value.split('('),
                    fn = split[0],
                    args = split[1].length == 1 ? []
                        : split[1].split(')')[0].split(', ').map(function(v) {
                            return v == 'true' ? true
                                : v == 'false'? false
                                : v[0] == '"' ? v.split('"')[1]
                                : parseFloat(v);
                        });
                if (fn == 'encode' || fn == 'src') {
                    image[fn].apply(null, Ox.merge(args, function(image) {
                        Ox.element('#filter').attr({
                            src: image.src()
                        }).css({width: '512px', height: '512px'});
                    }));
                } else if (fn == 'decode') {
                    image[fn].apply(null, Ox.merge(args, function(str) {
                        alert(str);
                    }));
                } else {
                    Ox.element('#filter').attr({
                        src: image[fn].apply(null, args).src()
                    });
                }
                select[0].selectedIndex = 0;
            }
        }
        Ox.element('<br>').appendTo(body);
        Ox.element('<img>').attr({
            src: image.src()
        }).appendTo(body);
        Ox.element('<img>').attr({
            id: 'filter',
            src: image.src()
        }).appendTo(body);        
        //Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));
    });

});