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);
        ['Filter...', 'blur', 'channel', 'contour', 'invert', 'edges', 'emboss', 'motionBlur', 'posterize', '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.element('#filter').attr({
                    src: image[select[0].value]().url()
                });
            }
        }
        Ox.element('<br>').appendTo(body);
        Ox.element('<img>').attr({
            src: image.url()
        }).appendTo(body);
        Ox.element('<img>').attr({
            id: 'filter',
            src: image.url()
        }).appendTo(body);        
        //Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));
    });

});