Creare un Image Flip con i canvas

Nell’ultimo post ho avuto modo di giocare con le trasformazioni del canvas. Mi è venuto in mente che potesse essere utile avere una classe  in mootools che prendesse un’immagine presente nella pagina e mi desse la possibilità di fare un flip orizzontale (o verticale della stessa) per ogni evenienza.

In italiano il termine più vicino e che non ho mai utilizzato è specchiare, ribaltare l’immagine. Si tratta di specchiarla su il suo asse orizzontale o verticale.

Il concetto è molto semplice, in pseudocodice, dovrò:

1. Cercare le immagini o l'immagine che voglio flippare
2. Prendere i pixel dell'immagine e ribaltarla.
3. Sostituire la vecchia immagine con la nuova immagine

Caricare un’immagine in un canvas è molto semplice. E’ stato spiegato già più volte in questo blog, comunque si tratta semplicemente di utilizzare la funzione drawImage del canvas e specificargli da quale elemento IMG prenderla:

Ora che abbiamo l’immagine dobbiamo flipparla. Come? Semplicemente utilizziamo la funzione scale del canvas e scaliamo l’asse o gli assi che vogliamo ribaltare di -1. In questo modo lo spazio di trasformazione del canvas finisce al di fuori del canvas stesso perciò dobbiamo anche translarlo e riposizionarlo (oppure utilizzare nel posizionamento di drawImage, le coordinate ribaltate).

Una volta fatto questo dobbiamo sostituire l’url della nostra immagine con la nuova immagine. Ci viene di aiuto il metodo del canvas toDataURL che esporta in base64 l’immagine e sostituirlo all’attributo “src” dell’immagine.

Il gioco è fatto. Attenzione, una cosa molto importante è che, per ragioni di sicurezza, non posso utilizzare toDataUrl() se il dominio dell’immagine è differente dal dominio della pagina che ha lanciato lo script. Ecco lo script (con dipendenza mootools):

var Flipper = new Class({
    initialize: function(selector) {
        $$(selector).each(function(img) { 

            var canvas = new Element('canvas', {
                width: img.width,
                height: img.height,
            });
            var ctx = canvas.getContext('2d');

            ctx.scale(-1, 1);
            ctx.drawImage(img, -img.width, 0, img.width, img.height);

            var url = canvas.toDataURL("image/png");
            img.set('src', url);
        })
    }
});
new Flipper('.flip');

Questa classe molto semplice prende tutti gli elementi immagine o canvas della pagina con classe “.flip” e li flippa orizzontalmente. E’ ovvio che funziona con qualsiasi selettore oltre a quello dell’esempio.