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

add image methods example

Browse source
This commit is contained in:
rolux 2012-04-14 11:46:46 +02:00
commit c8e25562db
8 changed files with 165 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
demos/image/index.html
View file

@ -3,7 +3,7 @@
<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="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/image.js"></script>
</head>
<body></body>

39
demos/image/js/image.js
View file

@ -2,15 +2,21 @@ Ox.load('Image', function() {
// see http://en.wikipedia.org/wiki/Lenna
Ox.Image('png/Lenna.png', function(image) {
Ox.Image('png/lenna256.png', function(image) {
var body = Ox.element('body'),
select = Ox.element('<select>').appendTo(body);
[
'Method...', 'blur(1)', 'blur(5)',
'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)',
@ -24,46 +30,39 @@ Ox.load('Image', function() {
'resize(256, 256)', 'resize(512, 512)',
'saturation(-0.5)', 'saturation(0.5)',
'scale(0.5, -1)',
'sharpen()', 'solarize()',
'src("png/Lenna.png")', 'src("png/OxJS.png")'
'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()) {
var split = select[0].value.split('('),
fn = split[0],
args = split[1].length == 1 ? []
: split[1].split(')')[0].split(', ').map(function(v) {
return v == 'true' ? true
: v == 'false'? false
: v[0] == '"' ? v.split('"')[1]
: parseFloat(v);
});
//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('#filter').attr({
Ox.element('#image').attr({
src: image.src()
}).css({width: '512px', height: '512px'});
});
}));
} else if (fn == 'decode') {
image[fn].apply(null, Ox.merge(args, function(str) {
alert(str);
}));
} else {
Ox.element('#filter').attr({
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({
src: image.src()
}).appendTo(body);
Ox.element('<img>').attr({
id: 'filter',
id: 'image',
src: image.src()
}).appendTo(body);
//Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));

BIN
demos/image/png/Lenna.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 464 KiB