KOMPOOS.NL

emboss filter alternative

home » manuals » microsoft-filter-alternative » emboss-filter.html

voorbeeld emboss filter alternatief

emboss filter

uitleg emboss procedure

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.

html code emboss voorbeeld


<p>
        <img alt="emboss filter" id="emboss-filter" src="emboss-filter.jpg" width="200" height="133" />
</p>

javascript voor het emboss filter alternatief


<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>