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

rename some examples

Browse source
This commit is contained in:
rolux 2012-06-21 08:16:34 +02:00
commit 7bd83e7b9f
11 changed files with 3 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
examples/image_manipulation/css/example.css Normal file
View file

@ -0,0 +1,8 @@
body {
margin: 16px;
background-color: rgb(240, 240, 240);
}
img {
display: block;
margin: 8px 0 0 2px;
}

13
examples/image_manipulation/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Image Manipulation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval(e.data); });</script>
</head>
<body></body>
</html>

90
examples/image_manipulation/js/example.js Normal file
View file

@ -0,0 +1,90 @@
/*
Load the image module.
*/
Ox.load('Image', function() {
/*
Load a sample image (about which you can read more on
<a href="see http://en.wikipedia.org/wiki/Lenna">Wikipedia</a>).
*/
Ox.Image('png/lenna256.png', function(image) {
/*
Create some DOM elements.
*/
var $body = Ox.$('body'),
$select = Ox.$('<select>').on({change: change}).appendTo($body),
$image = Ox.$('<img>').attr({src: image.src()}).appendTo($body);
[
'Method...', 'src("png/lenna256.png")',
'blur(2)', 'blur(4)',
'channel("r")', 'channel("g")', 'channel("b")',
'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": "green", "width": 2})',
'drawPath([[64, 64], [192, 64], [64, 192]], {"close": true})',
'drawRectangle([64, 64], [128, 128], {"fill": "red", "width": 0})',
'drawText("?", [16, 240], {"color": "blue", "font": "64px Arial"})',
'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)',
'filter([0, 1, 0, 1, -2, 1, 0, 1, 0])',
'hue(-60)', 'hue(60)',
'invert()',
'lightness(-0.5)', 'lightness(0.5)',
'map(function(v, xy) { return Ox.sum(xy) % 2 ? [0, 0, 0] : v; })',
'mosaic(4)', 'motionBlur()',
'photocopy()', 'pixel([16, 16], [255, 255, 255])', 'posterize()',
'saturation(-0.5)', 'saturation(0.5)',
'sharpen()', 'solarize()'
].forEach(function(method) {
Ox.$('<option>').html(method).appendTo($select);
});
function change() {
var value = $select.val(),
match = value.match(/^(\w+)\((.*?)\)$/),
fn = match[1], args;
/*
The <code>map</code> method takes a function as its argument, which
we can't <code>JSON.parse</code>, but have to <code>eval</code>.
*/
try {
args = JSON.parse('[' + match[2] + ']');
} catch(e) {
args = [eval('f = ' + match[2])];
}
/*
The <code>src</code> and <code>encode</code> methods are
asynchronous and take a callback function.
*/
if (fn == 'src' || fn == 'encode') {
image[fn].apply(null, args.concat(function(image) {
$image.attr({src: image.src()});
}));
/*
The <code>decode</code> method is asynchronous too, and its callback
function gets passed a string.
*/
} else if (fn == 'decode') {
image[fn].apply(null, args.concat(function(str) {
alert(str);
}));
/*
All other methods simply return the image.
*/
} else {
$image.attr({src: image[fn].apply(null, args).src()});
}
$select.val('Method...');
}
});
});

BIN
examples/image_manipulation/png/lenna256.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 116 KiB