185 lines
No EOL
5.7 KiB
HTML
185 lines
No EOL
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pixastic</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<script src="pixastic.js"></script>
|
|
<script src="pixastic.effects.js"></script>
|
|
<script src="pixastic.worker.js"></script>
|
|
<script>
|
|
window.onload = function() {
|
|
|
|
function doTest(test) {
|
|
var img = document.getElementById("original-image"),
|
|
canvas = document.getElementById("output-canvas"),
|
|
ctx = canvas.getContext("2d"),
|
|
progress = document.getElementById("progress-inner"),
|
|
P;
|
|
|
|
canvas.style.display = "none";
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
canvas.title = test.effect;
|
|
ctx.drawImage(img, 0, 0);
|
|
|
|
P = new Pixastic(ctx);
|
|
P[test.effect](test.options).done(function() {
|
|
canvas.style.display = "block";
|
|
}, function(p) {
|
|
progress.style.height = (p * 100) + "%";
|
|
});
|
|
}
|
|
|
|
var tests = [
|
|
{
|
|
effect : "posterize",
|
|
options : {
|
|
levels : 5
|
|
}
|
|
}, {
|
|
effect : "solarize"
|
|
}, {
|
|
effect : "colorfilter",
|
|
options : {
|
|
r : 0,
|
|
g : 194 / 255,
|
|
b : 177 / 255,
|
|
luminosity : 0
|
|
}
|
|
}, {
|
|
effect : "findedges"
|
|
}, {
|
|
effect : "emboss",
|
|
options : {
|
|
amount : 0.5,
|
|
angle : 135 / 180 * Math.PI
|
|
}
|
|
}, {
|
|
effect : "edgeenhance3x3"
|
|
}, {
|
|
effect : "edgeenhance5x5"
|
|
}, {
|
|
effect : "sharpen3x3",
|
|
options : {
|
|
strength : 0.5
|
|
}
|
|
}, {
|
|
effect : "sharpen5x5",
|
|
options : {
|
|
strength : 0.1
|
|
}
|
|
}, {
|
|
effect : "soften3x3"
|
|
}, {
|
|
effect : "soften5x5"
|
|
}, {
|
|
effect : "laplace3x3"
|
|
}, {
|
|
effect : "laplace5x5"
|
|
}, {
|
|
effect : "crossedges",
|
|
options : {
|
|
strength : 0.5
|
|
}
|
|
}, {
|
|
effect : "coloradjust",
|
|
options : {
|
|
r : 0,
|
|
g : 0.3,
|
|
b : 0
|
|
}
|
|
}, {
|
|
effect : "blur",
|
|
options : {
|
|
kernelSize : 5
|
|
}
|
|
},{
|
|
effect : "glow",
|
|
options : {
|
|
kernelSize : 5,
|
|
amount : 1.0
|
|
}
|
|
}, {
|
|
effect : "hsl",
|
|
options : {
|
|
hue : -0.8,
|
|
saturation : 0.5,
|
|
lightness : -0.3
|
|
}
|
|
},{
|
|
effect : "fliph"
|
|
},{
|
|
effect : "flipv"
|
|
},{
|
|
effect : "desaturate"
|
|
},{
|
|
effect : "brightness",
|
|
options : {
|
|
brightness : -1.00,
|
|
contrast : -0.1
|
|
}
|
|
},{
|
|
effect : "sepia",
|
|
},{
|
|
effect : "invert",
|
|
},{
|
|
effect : "noise",
|
|
options : {
|
|
amount : 0.5,
|
|
strength : 0.5,
|
|
mono : true
|
|
}
|
|
},{
|
|
effect : "removenoise"
|
|
},{
|
|
effect : "lighten",
|
|
options : {
|
|
amount : 0.5
|
|
}
|
|
},
|
|
{
|
|
effect : 'mosaic',
|
|
options : {
|
|
blockSize : 8
|
|
}
|
|
},
|
|
{
|
|
effect : 'equalize',
|
|
options : {
|
|
}
|
|
}
|
|
];
|
|
|
|
var ul = document.getElementById("testlist"),
|
|
li;
|
|
|
|
for (var i=0;i<tests.length;i++) {
|
|
li = document.createElement("li");
|
|
li.innerHTML = tests[i].effect;
|
|
li.setAttribute("data-test", i);
|
|
ul.appendChild(li);
|
|
}
|
|
|
|
ul.addEventListener("click", function(e) {
|
|
var target = e.target || e.srcElement,
|
|
test;
|
|
if (target.tagName == "LI") {
|
|
test = tests[target.getAttribute("data-test")];
|
|
doTest(test);
|
|
}
|
|
}, false);
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<ul id="testlist"></ul>
|
|
<img src="sample-images/monalisa.jpg" id="original-image">
|
|
<div id="progress"><div id="progress-inner"></div></div>
|
|
<canvas id="output-canvas"></canvas>
|
|
|
|
|
|
</body>
|
|
</html> |