110 lines
3.1 KiB
JavaScript
110 lines
3.1 KiB
JavaScript
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);
|
|
|
|
}
|
|
|