oxjs/examples/images/image_manipulation/js/example.js

/*
Load the image module.
*/
Ox.load('Image', function() {

    /*
    Load a sample image (which has its own entry in
    <a href="http://en.wikipedia.org/wiki/Lenna">Wikipedia</a>).
    */
    Ox.Image('png/lenna256.png', function(image) {

        /*
        Create some DOM elements. Ox.$ works like jQuery.
        */
        var $body = Ox.$('body'),
            $select = Ox.$('<select>').on({change: change}).appendTo($body),
            $image = Ox.$('<img>').attr({src: image.src()}).appendTo($body);

        [
            'Method...', 'src("png/lenna256.png")',
            'blur(2)', 'blur(4)',
            'channel("r")', 'channel("g")', 'channel("b")',
            '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": "green", "width": 2})',
            'drawPath([[64, 64], [192, 64], [64, 192]], {"close": true})',
            'drawRectangle([64, 64], [128, 128], {"fill": "red", "width": 0})',
            'drawText("?", [16, 240], {"color": "blue", "font": "64px Arial"})',
            '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)',
            'filter([0, 1, 0, 1, -2, 1, 0, 1, 0])',
            'hue(-60)', 'hue(60)',
            'invert()',
            'lightness(-0.5)', 'lightness(0.5)',
            'map(function(v, xy) { return Ox.sum(xy) % 2 ? [0, 0, 0] : v; })',
            'mosaic(4)', 'motionBlur()',
            'photocopy()', 'pixel([16, 16], [255, 255, 255])', 'posterize()',
            'saturation(-0.5)', 'saturation(0.5)',
            'sharpen()', 'solarize()'
        ].forEach(function(method) {
            Ox.$('<option>').html(method).appendTo($select);
        });

        function change() {
            var value = $select.val(),
                match = value.match(/^(\w+)\((.*?)\)$/),
                fn = match[1], args;
            /*
            The `map` method takes a function as its argument, which we can't
            `JSON.parse`, but have to `eval`.
            */
            try {
                args = JSON.parse('[' + match[2] + ']');
            } catch(e) {
                args = [eval('f = ' + match[2])];
            }
            /*
            The `src` and `encode` methods are asynchronous and take a callback
            function.
            */
            if (fn == 'src' || fn == 'encode') {
                image[fn].apply(null, args.concat(function(image) {
                    $image.attr({src: image.src()});
                }));
            /*
            The `decode` method is asynchronous too, and its callback function
            gets passed a string.
            */
            } else if (fn == 'decode') {
                image[fn].apply(null, args.concat(alert));
            /*
            All other methods simply return the image.
            */
            } else {
                $image.attr({src: image[fn].apply(null, args).src()});
            }
            $select.val('Method...');
        }

    });

});