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

P

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

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

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

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

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

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

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

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

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

Повернём:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылки

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

Дмитрий Волотко