oxjs/source/Ox.Image/Ox.Image.js

Ox.load.Image = function(options, callback) {

    Ox.Image = function() {

        var self = {},
            that = {};

        if (arguments.length == 2) {
            self.src = arguments[0];
            self.callback = arguments[1];
        } else {
            self.width = arguments[0];
            self.height = arguments[1];
            self.callback = arguments[2];
        }

        self.channels = 'RGBA';

        self.map = function(fn) {
            var imageData = self.context.getImageData(0, 0, self.width, self.height),
                i, n = imageData.data.length;
            for (var i = 0; i < n; i += 4) {
                var data = fn([
                    imageData.data[i], imageData.data[i + 1],
                    imageData.data[i + 2], imageData.data[i + 3]
                ]);
                for (var c = 0; c < 4; c++) {
                    imageData.data[i + c] = data[c];
                };
            }
            self.context.putImageData(imageData, 0, 0);
        }

        self.setSL = function(sl, d) {
            var c = sl == 'saturation' ? 1 : 2;
            self.map(function(rgba) {
                var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb;
                hsl[c] = d < 0 ? hsl[c] * (d + 1) : hsl[c] + (1 - hsl[c]) * d;
                rgb = Ox.rgb(hsl);
                return [rgb[0], rgb[1], rgb[2], rgba[3]];
            });
        }

        that.brightness = function(val) {
            self.setSL('brightness', val);
        };


        that.channel = function(channel) {
            self.map(function(rgba) {
                var hue = Ox.hsl([rgba[0], rgba[1], rgba[2]])[0],
                    rgb = Ox.rgb([hue, 1, 0.5]);
                return [rgb[0], rgb[1], rgb[2], rgba[3]];
            });
        }

        that.hue = function(val) {
            self.map(function(rgba) {
                var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb;
                hsl[0] = (hsl[0] + val) % 360;
                rgb = Ox.rgb(hsl);
                return [rgb[0], rgb[1], rgb[2], rgba[3]];
            });
        };

        that.invert = function() {
            self.map(function(rgba) {
                return [255 - rgba[0], 255 - rgba[1], 255 - rgba[2], rgba[3]];
            });
        };

        that.saturation = function(val) {
            self.setSL('saturation', val);
        };

        that.url = function() {
            return self.canvas.toDataURL();
        };

        Ox.print(self);
        if (self.src) {
            self.image = new Image();
            self.image.onload = init;
            self.image.src = self.src;
        } else {
            init();
        }

        function init() {
            if (self.image) {
                self.width = self.image.width;
                self.height = self.image.height;
            }
            self.canvas = Ox.element('<canvas>').attr({
                width: self.width,
                height: self.height
            })[0];
            self.context = self.canvas.getContext('2d');
            if (self.image) {
                self.context.drawImage(self.image, 0, 0);
            }
            self.callback(that);
        }

    };

    callback(true);

}