Модифицировать и экспортировать PNG

Question

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

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

Оригинальные изображения сделаны в Photoshop и разделены на отдельные слои на основе типа баннера. В идеале я бы хотел создать систему, позволяющую изменять цвета (RGB, слайдер, что-то в этом роде), изменять значок либо набором предустановленных значков, либо их загрузкой, так и возможностью изменять текст на изображения.

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

TL; 0: Есть ли способ изменить набор параметров для изменения цветов, значков или текста, а затем загрузить результат в виде PNG? Тип кода не имеет значения, я готов учиться, просто хочу знать правильное направление.

Ниже приведена информация о текущем коде для всех, кто интересуется.

https://dl.dropboxusercontent.com/u/90098446/website.zip

Пример изображение (игнорировать белые линии):

Answer 1

Похож каждый баннер состоит из четырех слоев: знамя, значок, текст и дополнительные слезы.

Сохраните отдельные слои и соберите их с помощью javascript на переднем конце. Упорядочение частей в виде листов спрайтов может сделать это более удобным как для редактирования в Photoshop, так и для сборки программно.

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

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

Answer 2

Я действительно сделал что-то подобное. Вы должны использовать canvas в своем HTML и иметь конечное количество возможных изображений или, возможно, некоторые Javascript function s, чтобы нарисовать то, что хочет пользователь. Эти изображения/function s должны быть объединены в ваш canvas, чтобы пользователь мог просмотреть, что представляет собой его изображение, и набор элементов управления для изменения.

Это SO post показывает, как вы можете получить png от canvas. Я предлагаю вам иметь кнопку сохранения, когда пользователь завершает изображение, и это должно отправить изображение на сервер, где он будет сохранен. Функция загрузки должна загрузить эту картинку.

Я сделал это по-другому.Я использовал canvas в качестве предварительного просмотра, и когда пользователь завершил настройку, они были отправлены на сервер в виде JSON, где окончательное изображение было собрано вместе.