oxjs/demos/image/js/image.js

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

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

    Ox.Image('png/lenna256.png', function(image) {
        var body = Ox.element('body'),
            select = Ox.element('<select>').appendTo(body);
        [
            'Method...', 'src("png/lenna256.png")',
            '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)',
            'drawCircle([128, 128], 64, {"fill": "rgba(0, 0, 0, 0.5)"})',
            'drawLine([[64, 64], [192, 192]], {"color": "red", "width": 2})',
            'drawPath([[64, 64], [192, 64], [64, 192]], {"close": true, "fill": "rgba(0, 0, 0, 0.5)", "width": 2})',
            'drawRectangle([64, 64], [128, 128], {"fill": "rgba(0, 0, 0, 0.5)"})',
            'drawText("?", [128, 160], {"font": "64px Arial", "outline": "2px white"})',
            '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()'
        ].forEach(function(filter) {
            Ox.element('<option>').html(filter).appendTo(select);
        });
        select[0].onchange = function() {
            if (select[0].value[0] == select[0].value[0].toLowerCase()) {
                //Ox.print(select[0].value.match(/^(\w+)\((.+)\)$/))
                var match = select[0].value.match(/^(\w+)\((.*?)\)$/),
                    fn = match[1],
                    args = JSON.parse('[' + match[2] + ']');
                //Ox.print('??', fn, args, image.drawLine)
                if (fn == 'encode' || fn == 'src') {
                    image[fn].apply(null, Ox.merge(args, function(image) {
                        Ox.element('#image').attr({
                            src: image.src()
                        });
                    }));
                } else if (fn == 'decode') {
                    image[fn].apply(null, Ox.merge(args, function(str) {
                        alert(str);
                    }));
                } else {
                    Ox.element('#image').attr({
                        src: image[fn].apply(null, args).src()
                    });
                    Ox.print('DONE')
                }
                select[0].selectedIndex = 0;
            }
        }
        Ox.element('<br>').appendTo(body);
        Ox.element('<img>').attr({
            id: 'image',
            src: image.src()
        }).appendTo(body);        
        //Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));
    });

});