Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Virare un immagine ad un colore predefinito

Pubblicato il 23 Gennaio 201423 Gennaio 2014 Categoria:

Ancora una volta una richiesta d’aiuto pervenuta sul forum è alla base dei nostri tutorial.

Virare un'immagine ad un colore predefinito

Paolo infatti aveva la necessità di virare alcune immagini ad un colore predefinito volendo però che al mouseover queste tornassero con i colori originali (la richiesta sul Forum è la seguente canvas css jquery modifica per l’effetto hover ).

Paolo ci segnalava una funzione trovata in rete adatta allo scopo ( tintImage, che utilizza l’elemento HTML5 canvas che consente il rendering dinamico delle immagini) che però non riusciva ad adattare al suo caso. La funzione è la seguente:

function tintImage(imgElement, tintColor) {
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement, 0, 0);

    var map = ctx.getImageData(0, 0, imgElement.offsetWidth, imgElement.offsetHeight); // Corretto su segnalazione di Paolo
    var imdata = map.data;
    var r, g, b, avg;

    for ( var p = 0, len = imdata.length; p < len; p += 4 ) {
        r = imdata[p];
        g = imdata[p + 1];
        b = imdata[p + 2];

        avg = Math.floor((r + g + b) / 3);

        imdata[p] = imdata[p + 1] = imdata[p + 2] = avg;
    }

    ctx.putImageData(map, 0, 0);
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    imgElement.src = canvas.toDataURL();
}

Abbiamo quindi preso 3 immagini ed abbiamo sviluppato la funzione javascript necessaria allo scopo, sfruttando anche la proprietà CSS z-index: tale proprietà infatti ci consente di posizionare un’altro elemento sopra l’immagine originale.
Volendo virare le immagini con tre differenti colori, come prima cosa creiamo un array con i colori da applicare alle immagini:

        var toColor = {
            0 : '#ff0000',
            1 : '#ff9900',
            2 : '#FFFFFF'
        };

A questo punto eseguiamo un ciclo sulle immagini principali: “avvolgiamo” ogni immagine in un div contenitore e la cloniamo assegnandoli la classe ‘item-vired’.
Inseriamo quindi l’immagine clonata prima dell’immagine originale ed infine assegniamo al contenitore le dimensioni dell’immagine.

        jQuery('.item').each( function () {
            var el = jQuery(this);
            el.wrap("<div class='img_wrapper'>")
            .clone()
            .addClass('item_vired')
            .insertBefore(el).queue( function () {
                var el = jQuery(this);
                el.parent().css({
                    "width": this.width,
                    "height": this.height
                });                
                el.dequeue();
            });         
        });

Il metodo .queue() ci permette di manipolare direttamente una coda di funzioni.
Inoltre richiamando il metodo con una funzione di callback ci permette di collocare una nuova funzione alla fine della coda.
La funzione di callback verrà eseguita una volta per ogni elemento.

Utilizziamo quindi la funzione tintImage per virare ogni immagine con il proprio colore assegnato precedentemente tramite l’array toColor definito all’inizio.

A questo punto abbiamo quindi un contenitore ( img_wrapper ) con all’interno due immagini: quella clonata e virata ( item_wired ) e quella originale ( item ).
Qui ci vengono in aiuto le proprietà CSS z-index e position: il contenitore infatti verrà posizionato in maniera relativa mentre le due immagini saranno posizionate in modo assoluto.
Inoltre all’immagine virata verrà dato uno z-index di 100 per posizionarla al di sopra di quella originale.

A questo punto utilizziamo le funzioni mouseover e mouseout sul contenitore per ottenere l’effetto voluto: useremo un’animazione per modificare l’opacità dell’immagine virata per far apparire l’immagine originale posizionata esattamente sotto di essa.

        jQuery('.img_wrapper').mouseover(function () {
            jQuery(this).children('.item_vired').stop().animate({
                opacity: 0,
            }, 500);
        });
        jQuery('.img_wrapper').mouseout(function () {
            jQuery(this).children('.item_vired').stop().animate({
                opacity: 1,
            }, 500);
        })

Ovviamente il tutto andrà eseguito al document.ready.
Otteniamo quindi il seguente codice javascript

jQuery(function () {
    jQuery(window).load(function () {

        var toColor = {
            0 : '#ff0000',
            1 : '#ff9900',
            2 : '#FFFFFF'
        }; 

        jQuery('.item').each( function () {
            var el = jQuery(this);
            el.wrap("<div class='img_wrapper'>")
            .clone()
            .addClass('item_vired')
            .insertBefore(el).queue( function () {
                var el = jQuery(this);
                el.parent().css({
                    "width": this.width,
                    "height": this.height
                });                
                el.dequeue();
            });         
        });

        jQuery('.item_vired').each(function (index, value) {                
                tintImage(this, toColor[index]);
        });

        jQuery('.img_wrapper').mouseover(function () {
            jQuery(this).children('.item_vired').stop().animate({
                opacity: 0,
            }, 500);
        });
        jQuery('.img_wrapper').mouseout(function () {
            jQuery(this).children('.item_vired').stop().animate({
                opacity: 1,
            }, 500);
        });
    });
});

function tintImage(imgElement, tintColor) {
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement, 0, 0);

    var map = ctx.getImageData(0, 0, imgElement.offsetWidth, imgElement.offsetHeight); // Corretto su segnalazione di Paolo
    var imdata = map.data;
    var r, g, b, avg;

    for ( var p = 0, len = imdata.length; p < len; p += 4 ) {
        r = imdata[p];
        g = imdata[p + 1];
        b = imdata[p + 2];

        avg = Math.floor((r + g + b) / 3);

        imdata[p] = imdata[p + 1] = imdata[p + 2] = avg;
    }

    ctx.putImageData(map, 0, 0);
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    imgElement.src = canvas.toDataURL();
}

Il codice CSS invece sarò il seguente:

.img_wrapper {position:relative;float:left;display:inline-block;margin:0;padding:0 5px;}
.item {position:absolute;}
.item_vired {position:absolute;z-index:100;opacity:1}

 

Potete visualizzare la

DEMO

Questo tutorial ti è servito? Sostieni jQuery Italia con una donazione!

[donateplus]

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3559 download)
  • jquery-1.4.1.min.js (3124 download)
  • jqueryformwizard-201.html (3120 download)
  • tinytips11.html (3108 download)
  • jquery-ui-1.8rc1.zip (2974 download)
  • jquerytools120.html (2901 download)
  • jquery-1.4.2.min.js (2893 download)
  • calendarPicker.html (2879 download)
  • 1.0.0.zip (2876 download)
  • move-background.html (2842 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) modalbox (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) tooltip (6) tutorial (12) twitter (2) upload (3) utility (18) VELug (3) video (3) widget (3) WYSIWYG (2) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....