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

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

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

Чтобы все работало, на сервере должен быть установлен PHP-интерпретатор с библиотекой GD — нашей рабочей лошадкой. Именно благодаря GD мы сможем поварачивать, менять размеры, отражать изображения, ну и делать несколько весьма любопытных вещей. 8)

И так, начнем-с! 🙂

 

Надеюсь, вы уже приготовили для пыток изображение (мой подопытный кролик стянут с 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());

Куда же нации без любимого всеми Чака? 8)

  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).

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

Реклама



    Добавить комментарий

    Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

    Логотип WordPress.com

    Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

    Фотография Twitter

    Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

    Фотография Facebook

    Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

    Google+ photo

    Для комментария используется ваша учётная запись Google+. Выход / Изменить )

    Connecting to %s



%d такие блоггеры, как: