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')); }); });