Phototype: работа с картинками

Нашёл в сети любопытнейший скрипт, который упрощает работу с графикой. Приятно то, что со скриптом легко работать, он прост как две копейки. Совершенно нетрудными манипуляциями мы повернуть картинку, изменить размер, отобразить зеркально, поменять гамму цветов и многое многое другое. Естественно для работы со скриптом понадобиться связка PHP/GD. Посмотреть демо, и решить, а стоит ли вам читать дальше, можно тут.

Автор скрипта решил не заморачиваться с картинкой, и взял первую попавшуюся с сервиса Flickr.

Для начала поменяем размер картинки:

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

Зеркально отразим картинку:

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());

Повернём:

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());

Накинем тень и выделим контуры:

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());

А может сереньким? :)

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());

Добавим надпись:

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());

Ну и в качестве вкусной плюшки, Чак Норриса в студию!

1. 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());

Приготовим картинку для вывода:

1. l_oPhoto = new Photo().load(«test.jpg»).dropShadow().flipH().makeSketchy();
2. document.body.appendChild(l_oPhoto.fetch());

Вот так просто и красиво!

Ссылки

Демо
Оригинал и источник
Phototype