Effetti sulle immagini con javascript: la libreria phototype.

E' passato un po' di tempo da quando ho scritto questo articolo.
Il mondo del digital è sempre in evoluzione e potresti trovare delle informazioni non più aggiornate.

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:

Altri post che potrebbero interessarti:

  • Fabio

    la foto con chuck norris però dovrebbe avere la casetta che vola via dopo un calcio rotante 😀

  • Potremmo lavorarci per fare quest’estensione alla libreria… 😀

  • 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?