Javascript Image Effects

Clicca sul nome dell'effetto, nella tabella sottostante, per vedere l'immagine trasformata.

Immagine originale:

Immagine trasformata:

Effetto Compatibilità

Questa libreria cerca di applicare, lato client, diversi effetti diversi effetti sulle immagini. IE ha, per lungo tempo, avuto i suoi filtri, che hanno fornito alcuni effetti per immagini nel browser. Con l'estensione canvas, alcuni di questi effetti possono essere presentati anche in Firefox e Opera.

In Safari manca il supporto ai metodi getImageData/putImageData per il canvas 2d-context; l'unico effetto che funzionerà su tale browser sarà il flipping. Le funzioni, tuttavia, sono presenti nell'ultima release della Webkit nightly. Si può verificare la compatibilità nella colonna destra della tabella qui sopra.

In IE gli effetti sono molto veloci a causa a causa del suo supporto nativo per i filtri. Le prestazioni di Opera sono decenti ma Firefox è piuttosto lento per la manipolazione sui pixel come la come sfocatura, l'effetto emboss ecc...

Visto che il supporto per questi effetti è ancora piuttosto scarso e le prestazioni non eccellenti, non sono sicuro del riscontro immediato nelle pagine web. E' stata una cosa interessante da realizzare anche se "javascript non è nato espressamente per questi effetti, ma non importa".

Includere il file "imagefx.js" oltre allo script per ogni effetto (vedere il sorgente della pagina di origine per vedere tutti i files .js). Gli effetti possono essere applicati tramite javascript o per mezzo di un attributo personalizzato, come vedremo dal codice qui di seguito. Per ora solo un effetto può essere applicato ad una immagine. Cercando di aggiungerne altri, probabilmente ci saranno problemi.

Esempio 1:


    <img src="image.jpg" id="myimage" />
        <script type="text/javascript" >
        jsImageFX.doImage(document.getElementById("myimage"), "blur");
	</script>

Esempio 2:


    <img src="image.jpg" imagefx="blur" />

Conclusioni:

Consente di applicare più effetti sulle immagini;
Il filtro di contrasto non è molto buono per gli aggiustamenti dei negativi;
Testi veri e proprio non sono stati ancora effettuati sulle pagine web.