Plaats de html code ergens op de pagina waar de "embossed" afbeelding moet verschijnen, en plaats het javascript zo laag als mogelijk in de body-sectie van de pagina. Het script is foutloos volgens de JSLint-norm. In alle browsers wordt de embossed afbeelding weergegeven.
<p>
<img alt="emboss filter" id="emboss-filter" src="emboss-filter.jpg" width="200" height="133" />
</p>
<script>
/*global window: false */
/*global progid: false */
/*global DXImageTransform: false */
var i,
j;
function emboss_filter(image) {
var canvas_emboss = document.createElement("canvas");
var canvas_inhoud = canvas_emboss.getContext("2d");
var image_breedte = image.width;
var image_hoogte = image.height;
canvas_emboss.width = image_breedte;
canvas_emboss.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 > 41 && gemiddelde_waarde < 180) {
gemiddelde_waarde = gemiddelde_waarde - 40;
}
if (gemiddelde_waarde > 70 && gemiddelde_waarde < 190) {
gemiddelde_waarde = gemiddelde_waarde + 90;
}
if (gemiddelde_waarde > 255) {
gemiddelde_waarde = 255;
}
if (gemiddelde_waarde > 20 && gemiddelde_waarde < 50) {
gemiddelde_waarde = gemiddelde_waarde + 100;
}
if (gemiddelde_waarde < 20) {
gemiddelde_waarde = gemiddelde_waarde + 200;
}
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_emboss.toDataURL();
}
function detecteer_emboss(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.6;
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.6;
};
} else {
image.mouseOverImage = image.src;
image.onload = function() {
return true;
};
image.normalImage = emboss_filter(image, false);
image.onmouseover = function() {
this.src = this.mouseOverImage;
};
image.onmouseout = function() {
this.src = this.normalImage;
};
image.src = image.normalImage;
}
}
function start_emboss_filter() {
var emboss_afbeelding = document.getElementById("emboss-filter");
detecteer_emboss(emboss_afbeelding);
}
window.onload = start_emboss_filter;
</script>