Сайт фотоэффектов на основе php

Я хочу знать, как построены такие веб-сайты, как http://photofunia.com/ и другие сайты онлайн-фотоэффектов. Например, используя php, я хочу объединить два изображения frame.png с profile.jpg. Я хочу, чтобы мой frame.png был прозрачным в центре, где я бы разместил свой профиль .jpg.

Я пробовал это, но он не работает:

<?php $dest = imagecreatefromjpeg('dest.jpg');
      $src = imagecreatefrompng('logo.png');
      $src = imagerotate($src, 90, imageColorAllocateAlpha($src, 0, 0, 0, 127));
      $almostblack = imagecolorallocate($src,254,254,254); 
      $src =  imagecolortransparent($src,$almostblack); 
      imagealphablending($dest, true);
      imagesavealpha($dest, 0);
      imagecopymerge($dest, $src, 900,600, 1, 1, 90,90, 90);

Спасибо заранее. Пожалуйста, помогите мне.

Ответ 1

Вы получили более технический ответ, поэтому я собираюсь сосредоточиться на творческом аспекте вещей. Вы также упоминали знакомство с связанными библиотеками php и даже с предыдущими попытками создать похожие композиции, которые, как оказалось, в конце концов не имели блеска.

По моему мнению, это стремление гораздо больше зависит от артистизма, творчества и, самое главное, от подготовленных активов. При ручной подготовке этих изображений у вас будет больше утонченности над конечным результатом, а также оставить только простой композитинг до php. Не весь процесс редактирования.

Честно говоря, такие подробные результаты не достижимы с помощью API. Для этого проекта потребуются часы ручной работы и редактирования. Обращаем внимание на освещение, прозрачность и цвета.

Наиболее впечатляющими эффектами являются те, где объекты на фотографии перекрывают добавленный пользователем образ. То есть:

Хотя этот пример довольно прост, та же самая логика относится к более сложным композициям.

Вам нужно начать с изображения с высоким разрешением. Особенно, если вы будете предлагать физические отпечатки своим пользователям.
Высокое разрешение также необходимо, так как вам придется редактировать и готовить их в программе, например, Photoshop.
Для достижения наилучших результатов для Photoshop потребуются сложные сложные маски. Подумайте о резких и плавных альфа-переходах. Не просто вырезать все жесткими линиями.

При рассмотрении приведенного выше примера вы сможете уйти с одним слоем в Photoshop. Просто вырежьте отверстие, где фотографии будут размещены и экспортированы как png.

В других примерах я бы рекомендовал отдельные фоновые и передние слои с добавленным пользователем изображением, расположенным между ними.

Это еще один отличный пример, когда разрешение имеет первостепенное значение. Листья слишком малы, чтобы эффективно маскироваться с крошечным разрешением. Некоторые листья также могут быть размыты и не в фокусе; опять же, не разрезайте их жесткими линиями. Для достижения наилучших результатов используйте мягкую кисть, маскируя их в Photoshop.

И последнее, но не менее важное: здесь очень простой практический пример.

Обратите внимание, как фоновое изображение имеет гладкую маску, а лист - жесткий. Честно говоря, части листа не в фокусе и могут быть дополнительно уточнены. Инвестирование времени, которое вы сделаете здесь, сделает мир различием в том, насколько убедительно будут ваши окончательные результаты.

Сохраните каждый слой как png и составьте внутри php. Я бы рекомендовал убедиться, что каждый png имеет тот же размер. Не пытайтесь расположить крошечный png более большой. Дайте им одинаковые размеры, чтобы сделать выравнивание легким.

Ответ 2

Отвечая на ваши вопросы:

Adobe не предоставляет API для этого. Однако вы можете использовать Adobe Creative SDK для ваших материалов для редактирования фотографий.
Обычно используется много библиотек Javascript. вы можете проверить библиотеки управления изображениями в стиле codegeekz
Если вы настаиваете на использовании php, лучше всего пойти с ImageMagick или с помощью Обработка изображений GD Library. Именно разработчик должен сделать эти результаты "идеальными", как вы это называете. Есть несколько интересных библиотек редактирования изображений php, которые вы можете проверить, многие из которых поддерживаются до даты!
Для слияния изображений вы можете перейти к официальным документам для imagecopymerge или, возможно, использовать библиотеку Imagick/GD. Это сообщение fooobar.com/questions/96905/... может дать вам головной убор.

Вы также можете использовать Gmagick, который является вилкой ImageMagick и быстрее (см. ) при обработке изображений (хотя и с меньшими возможностями). Оригинальный проект можно найти на graphicsmagick. Лично я строго рекомендую ImageMagick, учитывая его скорость, богатый набор функций, популярность, поддержку, документацию и примеры.

Дополнительная ссылка:

Ответ 3

Если я понял вопрос, тогда ему не нужно быть js, Css сделает трюк. Посмотрите на альфа и непрозрачность и z-index

#img1{position:absolute;top:0px;}
#img2{position:absolute;top:50px;opacity:.6;}

<img src="http://lorempixel.com/400/200/sports/1" id="img1">
<img src="http://lorempixel.com/50/50/sports/2" id="img2">