Phototype: на JavaScript станцуем с бубном

06.09.2008 in Linux, PHP, Дебилизмы, Интернет, Программы
Tags: библиотека, программирование, gd, javascript, сервер, фотография, PHP

Недавно у меня появились немного ненормальные мысли по поводу того, чтобы при помощи javascript-фронтенда манипулировать изображениями на стороне сервера.

Как оказалось, эту мысль реализует интересная библиотека Phototype – клиент/серверная библиотека на основе Prototype, при помощи которой можно делать с изображениями все, что вздумается!

Чтобы все работало, на сервере должен быть установлен PHP-интерпретатор с библиотекой GD – нашей рабочей лошадкой. Именно благодаря 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.flipH(); // Отражаем по вертикали, flipH – горизонтально
4. document.body.appendChild(l_oImage.fetch());

Ради разнообразия повернем чуть-чуть:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipH();
4. l_oPhoto.rotate(3); // поворачиваем на 3 градуса
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. 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(); // каждая библиотека должна содержать такую переменную, имхо
7. document.body.appendChild(l_oPhoto.fetch());

Вложенные функции
Phototype поддерживает вложенные функции (все проделанное выше можно уместить в одну строку):

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

 

Скачать библиотеку можно здесь (доступно по лицензии GNU GPL).

Оригинал. Вольный перевод – Селицкас Павел.