Andrea
Vit

Vi segnalo un’utilissima risorsa per poter creare degli effetti alle immagini attraverso l’uso di una libreria chiamata phototype.

La soluzione utilizza lato server tecnologia php abbinata alla libreria GD per il rendering delle immagini. La parte cliente javascript è basata su prototype.

Vi permette a partire da un’immagine come questa:

Di poterla ridimensionare:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. document.body.appendChild(l_oPhoto.fetch());

Invertirla orizzontalmente:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV(); // Flip vertical, use flipH to flip horizontal
4. document.body.appendChild(l_oImage.fetch());

Ruotarla:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3); // rotate 3 degrees
5. document.body.appendChild(l_oPhoto.fetch());

Inserirvi un’ombra e fare un effetto ‘Sketchy’..

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3);
5. l_oPhoto.dropShadow();
6. l_oPhoto.makeSketchy();
7. document.body.appendChild(l_oPhoto.fetch());

Convertirla in bianco e nero:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3);
5. l_oPhoto.dropShadow();
6. l_oPhoto.toGreyScale();
7. document.body.appendChild(l_oPhoto.fetch());

Aggiungere una didascalia:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption(‘Get ajaxorized!’, ’1942.ttf’);
6. document.body.appendChild(l_oPhoto.fetch());

E aggiungerci Chuck Norris :

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption(‘Cheers, Chuck’, ’1942.ttf’);
6. l_oPhoto.addChuckNorris(); // every library should have this function imo
7. document.body.appendChild(l_oPhoto.fetch());

Ringrazio per la segnalazione l’uomo – usabilità Luca.

Da consumarsi possibilmente unobtrusive…:-)

Risorse correlate:

• Guida all’uso della libreria php GD
• Guida all’uso di prototype.js

Tagged librerie javascript

§ 3 Responses to Effetti sulle immagini con javascript: la libreria phototype."

• Fabio says:

  09/06/2008 at 16:38

  la foto con chuck norris però dovrebbe avere la casetta che vola via dopo un calcio rotante
• Andrea Vit says:

  10/06/2008 at 08:16

  Potremmo lavorarci per fare quest’estensione alla libreria…
• luna says:

  05/03/2009 at 00:05

  Salve devo fare degli effetti sulle immagini di sfondo tipo quelle che si fanno con flash … Da un puntino esce poi un quadrato. qualcuno mi sa aiutare?