Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
85 lines (72 sloc) 2.54 KB
<!DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>
</head>
<body>
<canvas id="canvas"></canvas>
<br>
<input id="threshold" type="range" min="-128" max="128" step="1" value="0">
<script src="js/utils.js"></script>
<script>
window.onload = function _main() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "img/target.jpg"
image.onload = function() {
var width = image.width;
var height = image.height;
canvas.width = width;
canvas.height = height;
canvas.style.width = width;
canvas.style.height = height;
context.drawImage(image, 0, 0, width, height);
var imageData = context.getImageData(0, 0, width, height);
var data = imageData.data;
var initialData = new Uint8ClampedArray(imageData.data);
var negaData = buildNegativeData(data);
var elThreshold = document.getElementById("threshold");
elThreshold.onchange = function() {
var threshold = +elThreshold.value;
var offsetAbove = 4 * (width * -1);
var offsetBelow = 4 * (width * 1);
var offsetPrev = 4 * (-1)
var offsetNext = 4 * 1
for (var i = 0, length = 4 * width * height; i < length; i += 4) {
var rIndex = i + 0;
var gIndex = i + 1;
var bIndex = i + 2;
var aIndex = i + 3;
var rValue = (
initialData[rIndex + offsetBelow] +
initialData[rIndex + offsetAbove] +
initialData[rIndex + offsetNext] +
initialData[rIndex + offsetPrev] -
initialData[rIndex] * 4
) > threshold ? 255 : 0;
var gValue = (
initialData[gIndex + offsetBelow] +
initialData[gIndex + offsetAbove] +
initialData[gIndex + offsetNext] +
initialData[gIndex + offsetPrev] -
initialData[gIndex] * 4
) > threshold ? 255 : 0;
var bValue = (
initialData[bIndex + offsetBelow] +
initialData[bIndex + offsetAbove] +
initialData[bIndex + offsetNext] +
initialData[bIndex + offsetPrev] -
initialData[bIndex] * 4
) > threshold ? 255 : 0;
data[rIndex] = rValue;
data[gIndex] = gValue;
data[bIndex] = bValue;
}
context.putImageData(imageData, 0, 0);
};
};
};
</script>
</body>
</html>
Something went wrong with that request. Please try again.