forked from 0x2620/oxjs
71 lines
No EOL
3.1 KiB
JavaScript
71 lines
No EOL
3.1 KiB
JavaScript
Ox.load('Image', function() {
|
|
|
|
// see http://en.wikipedia.org/wiki/Lenna
|
|
|
|
Ox.Image('png/lenna256.png', function(image) {
|
|
var body = Ox.element('body'),
|
|
select = Ox.element('<select>').appendTo(body);
|
|
[
|
|
'Method...', 'src("png/lenna256.png")',
|
|
'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)',
|
|
'drawCircle([128, 128], 64, {"fill": "rgba(0, 0, 0, 0.5)"})',
|
|
'drawLine([[64, 64], [192, 192]], {"color": "red", "width": 2})',
|
|
'drawPath([[64, 64], [192, 64], [64, 192]], {"close": true, "fill": "rgba(0, 0, 0, 0.5)", "width": 2})',
|
|
'drawRectangle([64, 64], [128, 128], {"fill": "rgba(0, 0, 0, 0.5)"})',
|
|
'drawText("?", [128, 160], {"font": "64px Arial", "outline": "2px white"})',
|
|
'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()'
|
|
].forEach(function(filter) {
|
|
Ox.element('<option>').html(filter).appendTo(select);
|
|
});
|
|
select[0].onchange = function() {
|
|
if (select[0].value[0] == select[0].value[0].toLowerCase()) {
|
|
//Ox.print(select[0].value.match(/^(\w+)\((.+)\)$/))
|
|
var match = select[0].value.match(/^(\w+)\((.*?)\)$/),
|
|
fn = match[1],
|
|
args = JSON.parse('[' + match[2] + ']');
|
|
//Ox.print('??', fn, args, image.drawLine)
|
|
if (fn == 'encode' || fn == 'src') {
|
|
image[fn].apply(null, Ox.merge(args, function(image) {
|
|
Ox.element('#image').attr({
|
|
src: image.src()
|
|
});
|
|
}));
|
|
} else if (fn == 'decode') {
|
|
image[fn].apply(null, Ox.merge(args, function(str) {
|
|
alert(str);
|
|
}));
|
|
} else {
|
|
Ox.element('#image').attr({
|
|
src: image[fn].apply(null, args).src()
|
|
});
|
|
Ox.print('DONE')
|
|
}
|
|
select[0].selectedIndex = 0;
|
|
}
|
|
}
|
|
Ox.element('<br>').appendTo(body);
|
|
Ox.element('<img>').attr({
|
|
id: 'image',
|
|
src: image.src()
|
|
}).appendTo(body);
|
|
//Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));
|
|
});
|
|
|
|
}); |