0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

merge image module

Browse source
This commit is contained in:
j 2011-06-19 19:50:34 +02:00
commit 9c1023ca1f
4 changed files with 131 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demos/image/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>OxJS Image Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/image.js"></script>
</head>
<body></body>
</html>

11
demos/image/js/image.js Normal file
View file

@ -0,0 +1,11 @@
Ox.load('Image', function() {
Ox.Image('png/Netherlandish Proverbs.png', function(image) {
Ox.element('<img>').attr({src: image.url()}).appendTo(Ox.element('body'));
image.saturation(-0.9);
Ox.element('<img>').attr({src: image.url()}).appendTo(Ox.element('body'));
image.brightness(-0.5);
Ox.element('<img>').attr({src: image.url()}).appendTo(Ox.element('body'));
});
});

BIN
demos/image/png/Netherlandish Proverbs.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 387 KiB

110
source/Ox.Image/Ox.Image.js Normal file
View file

@ -0,0 +1,110 @@
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);
}