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: