Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Effetti su immagini con Pixastic

di: Filippo Buratti 20 Aprile 2009

In questo articolo applicheremo degli accattivanti effetti rollover sulle miniature di una galleria utilizzando Pixastic, una libreria Javascript che permette la manipolazione e il rendering dinamico delle immagini sfruttando l'elemento HTML Canvas. Per ragioni di comodità, gli esempi allegati sono realizzati con jQuery (esempio) e Prototype + Scriptaculous (esempio), lasciando la scelta del framework alle proprie preferenze personali: la struttura HTML utilizzata e il risultato raggiunto sono infatti per tutto identici.

Pixastic: Javascript Image Processing

Sul sito ufficiale della libreria, rilasciata con licenza MIT e sviluppata da Jacob Seidelin, è disponibile una ricca documentazione sulle modalità di implementazione e sugli effetti disponibili. C'è anche un interessante Photo Editor Online realizzato con Pixastic, proprio a sottolinerare le grandi potenzialità offerte.

Abbiamo detto che Pixastic basa il suo funzionamento sul nuovo elemento <canvas>, che è parte delle specifiche (WhatWG Web applications 1.0) di HTML5. Naturalmente, non tutti i browser implementano questo elemento: le recenti versioni di Mozilla Firefox, Opera e Safari hanno un buon supporto, purtroppo altrettanto non si può dire di Internet Explorer. Pixastic però estende la compabilità di alcuni effetti applicati con <canvas> anche al browser Microsoft, simulandoli grazie ai "soliti" filtri proprietari... Proprio in ragione della compatibilità cross-browser ci interesseremo solo delle soluzioni maggiormente compatibili: Blurfast, Desaturate, Invert, Lighten, Flip Horizontally e Flip Vertically. I nomi degli effetti sono di per sè già esplicativi. Per chi volesse esplorare le altre possibilità offerte da Pixastic, ogni filtro applicabile è ampiente descritto nelle modalità di utilizzo: qui l'elenco completo degli effetti disponibili (in tutto ben 27!). Sembra proprio di avere a disposizione in Javascript l'equivalente delle GD libraries di PHP!

Prima di procedere all'analisi dei nostri esempi finali, vediamo come funziona Pixastic e proviamo subito qualche riga di codice. Per far questo andiamo sulla pagina di download per prelevare i file necessari: è possibile scaricare l'archivio completo o selezionare a piacimento gli effetti da aggiungere. Una volta fatto questo includiamo i file Javascript nel tag <head></head> della nostra pagina, più o meno così:

<script type="text/javascript" src="pixastic.core.js"></script>
<script type="text/javascript" src="desaturate.js"></script>

Ora abbiamo a disposizione un oggetto globale Pixastic; questo oggetto dispone del metodo Pixastic.process() che possiamo applicare alle immagini del nostro documento. Come primo argomento la funzione attende un elemento immagine valido. Il secondo parametro è l'effetto da applicare, mentre il terzo può essere facoltativo; si tratta di un hash di opzioni che cambiano a seconda dell'effetto.

Pixastic.process accetta in realtà anche un quarto argomento, per invocare una eventuale funzione di callback. Per completezza Pixastic può processare gli effetti sulle immagini anche automaticamente, in base a una speciale sintassi delle classi CSS applicate ai tag <img>; basta attivare manualmente il parsing delle classi nel nostro codice Javascript (Pixastic.parseOnLoad = true). Per informazioni più specifiche potete consultare la documentazione ufficiale. Alcune precisazioni: Pixastic funziona solo con immagini che risiedono sullo stesso server della pagina. Inoltre, prima di invocare Pixastic.process su un'immagine, è bene assicurarsi che ne sia avvenuto il completo caricamento:

var img = document.getElementById('example');
if (img.complete) {
Pixastic.process(img, "lighten", {amount:0.5});
}

Direi che siamo a posto, possiamo prendere confidenza con gli esempi della pagina che ho preparato, e magari fare un po' di test con gli effetti e i vari parametri disponibili per ognuno, prima di affrontare qualcosa di più concreto, riutilizzabile nel nostro sito o nei nostri lavori.

Pagina successiva

Pagine: