Plaats de html-code op de plaats waar de "detect" moet komen, en plaats het javascript zo laag als mogelijk in de body-sectie van de pagina. Het script is cross-browser en foutloos volgen JSLint. In het script zijn er verschillende parameters te veranderen. Voor IE explorer kan je de Bias een waarde geven van -1 t/m +1 (zoek even in het script naar de 2 plaatsen waar de bias een waarde krijgt). Voor de "strict" browsers kan je experimenteren met de waarden van de variabele gemiddelde_waarde. Ik geef de getallen die je kan veranderen (in volgorde van het script): 4, 30, 150, 50 en -80. De andere getallen mag je natuurlijk wijzigen, maar dat heeft niet zo veel nut.
<p>
<img alt="edge detection" id="detecteren" src="edge-detect.jpg" width="140" height="208" />
</p>
<script>
/*global window: false */
/*global progid: false */
/*global DXImageTransform: false */
var i,
j;
function edge_detection(image) {
var canvas_edge = document.createElement("canvas");
var canvas_inhoud = canvas_edge.getContext("2d");
var image_breedte = image.width;
var image_hoogte = image.height;
canvas_edge.width = image_breedte;
canvas_edge.height = image_hoogte;
canvas_inhoud.drawImage(image, 0, 0);
var imageData = canvas_inhoud.getImageData(0, 0, image_breedte, image_hoogte);
for (i = 0; i < imageData.height; i++) {
for (j = 0; j < imageData.width; j++) {
var index = (i * 4) * imageData.width + (j * 4);
var rood = imageData.data[index];
var groen = imageData.data[index + 1];
var blauw = imageData.data[index + 2];
var alpha = imageData.data[index + 3];
var gemiddelde_waarde = (rood + groen + blauw) * 0.3333;
if (gemiddelde_waarde > 4) {
gemiddelde_waarde = gemiddelde_waarde + 30;
}
if (gemiddelde_waarde > 150) {
gemiddelde_waarde = 255;
}
if (gemiddelde_waarde > 50 && gemiddelde_waarde < 255) {
gemiddelde_waarde = gemiddelde_waarde - 80;
}
if (gemiddelde_waarde < 0) {
gemiddelde_waarde = 0;
}
imageData.data[index] = gemiddelde_waarde;
imageData.data[index + 1] = gemiddelde_waarde;
imageData.data[index + 2] = gemiddelde_waarde;
imageData.data[index + 3] = alpha;
}
}
canvas_inhoud.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
return canvas_edge.toDataURL();
}
function detecteer_edge(image) {
var is_iexp = document.namespaces ? 1: 0;
if (is_iexp) {
image.style.zoom = 1;
image.style.filter = 'progid:DXImageTransform.Microsoft.Emboss(enabled=true)';
image.filters.item("DXImageTransform.Microsoft.Emboss").Bias = 0.99;
image.onmouseover = function() {
this.style.filter = 'progid:DXImageTransform.Microsoft.Emboss(enabled=false)';
};
image.onmouseout = function() {
this.style.filter = 'progid:DXImageTransform.Microsoft.Emboss(enabled=true),Bias=0.99';
image.filters.item("DXImageTransform.Microsoft.Emboss").Bias = 0.99;
};
} else {
image.mouseOverImage = image.src;
image.onload = function() {
return true;
};
image.normalImage = edge_detection(image, false);
image.onmouseover = function() {
this.src = this.mouseOverImage;
};
image.onmouseout = function() {
this.src = this.normalImage;
};
image.src = image.normalImage;
}
}
function start_edge_detection() {
var edge_detect_afbeelding = document.getElementById("detecteren");
detecteer_edge(edge_detect_afbeelding);
}
window.onload = start_edge_detection;
</script>