KOMPOOS.NL

change image hue (javascript)

home » javascripts » image-effects » hue-image.html

voorbeeld hue image veranderen

uitleg change hue procedure

Deze procedure is een "work-around" om de hue van plaatjes te veranderen. In dit voorbeeld wordt traploos de hue veranderd, maar met kleine aanpassingen aan het script kan je natuurlijk verschillende toepassingen maken. Om dit traploze voorbeeld op jouw webruimte te kunnen gebruiken, moet je de html-code en het javascript in de body-sectie van jouw pagina plaatsen. Let er op dat bij het kopiëren (van de html-code) de image/png;base64 op één regel komt met de rest van de "img". Doordat de regel zo lang is wordt, in sommige browsers, de regel afgebroken... Het javascript is foutloos volgens JSLint, en de overige zaken op de pagina valideren volgens W3C.

html code voor hue changer


<img id="hue_image" 
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' 
alt="blank" width="160" height="240" />
<img src='http://static.dns5.nl/hue-image.jpg' id="hue_id" alt="hue" width="160" height="240" />

javascript voor het veranderen van de hue van een plaatje


<script>
/*global window: false */
var de_css_code = "#hue_image{position:absolute;opacity:.20;filter:alpha(opacity=20)}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
    stijl_element.styleSheet.cssText = de_css_code;
} else {
    stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var rood = 0, groen = 0, blauw = 0, hue_stapjes = 5, verander_hue_snelheid = 20;
function change_hue() {
    document.getElementById("hue_image").style.backgroundColor = "rgb(" + rood + "," + groen + "," + blauw + ")";
    if (blauw < 256 && blauw >= 0) {
        blauw += hue_stapjes;
        setTimeout(function() {
            change_hue();
        },
        verander_hue_snelheid);
    } else if (groen < 256 && groen >= 0) {
        groen += hue_stapjes;
        setTimeout(function() {
            change_hue();
        },
        verander_hue_snelheid);
    } else if (rood < 256 && rood >= 0) {
        rood += hue_stapjes;
        setTimeout(function() {
            change_hue();
        },
        verander_hue_snelheid);
    } else {
        hue_stapjes *= -1;
        if (hue_stapjes < 0) {
            blauw = 255;
            groen = 255;
            rood = 255;
        } else {
            blauw = 0;
            groen = 0;
            rood = 0;
        }
        setTimeout(function() {
            change_hue();
        },
        verander_hue_snelheid);
    }
}
if (window.attachEvent) {
    window.attachEvent("onload", change_hue);
} else {
    window.addEventListener("load", change_hue, false);
}
</script>