Создание аватара с использованием предопределенных наборов изображений

Question

Этот вопрос больше о руководстве, чем о решении моей проблемы:

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

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

Как я предполагал, это будет работать так, что в системе будет 2 части:

1. Внешний интерфейс, который использует HTML+CSS чтобы позволить пользователю выбирать и размещать несколько изображений
2. Действие сохранения отправляет эти изображения / слои и их позиции на сервер, который затем записывает их в виде плоского файла изображения.

Это мое предположение о том, как должна работать такая система. Если нет, советы / указатели будут высоко оценены.

Перенос предположения:

У меня смутное ощущение, что мне нужно будет использовать Canvas создать изображение на стороне клиента для первой части. Хотя это поднимает вопрос поддержки браузера. Было бы Canvas быть решением здесь, или мне лучше использовать обычный HTML4+CSS2, Откат немного, делает Canvas даже добавить какую-либо выгоду к этому? Я видел силу Canvas в системе обратной связи / сообщения о проблемах Google, где они используют этот элемент для создания скриншотов на стороне клиента!

Во второй части я понятия не имею. Когда я задаю этот вопрос, я читаю / изучаю создание изображений в C# и на жаргоне GDI+ а также Image Library появляются

Актуальные вопросы:

• C#: сохранить несколько изображений в один файл
• Есть ли какие-нибудь сценарии составного аватара, которые я мог бы украсть или посмотреть?
• jQuery / JavaScript Библиотека для создания аватаров?

Граватар или PHP не являются вариантами!

PS: Я ожидаю, что буду редактировать этот вопрос в свете моих исследований / выводов и любой помощи, оказанной сообществом SO, но я считаю, что это не обсуждение как таковое. Поскольку мое исследование SO не принесло большого количества потенциальных клиентов, я считаю, что мы могли бы сделать это вики-сообществом с лучшими ответами / предложениями, объединенными в одном посте. Благодарю.

Answer 1

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

Отправка сообщений по-прежнему создаст небольшую задержку для их браузера, чтобы заново загрузить страницу с новым изображением. Один из вариантов - вы можете использовать AJAX, чтобы просто загрузить новое изображение без перезагрузки всей страницы. Это, вероятно, даст лучший опыт, не требуя Flash/Silverlight.

Сколько разных комбинаций изображений у вас будет? Вы можете предварительно рассчитать все возможные комбинации программно и сохранить их. Это займет больше места для хранения, но меньше вычислительной мощности и несколько более быстрых обратных передач.

Если вы хотите сгенерировать изображение для каждого запроса, вы должны нарисовать каждое изображение на растровом изображении следующим способом:

Bitmap avatarBitmap = new Bitmap(AvatarWidth, AvatarHeight);
using (Graphics g = Graphics.FromImage(avatarBitmap))
{
    foreach (Bitmap bitmap in ListOfImagesToDraw)
    {
        g.DrawImage(bitmap, 0, 0);
    }
}
avatarBitmap.Save(fileName, ImageFormat.Png);

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

Если вам нужно определить Z-порядок так, чтобы некоторые изображения рисовались поверх других изображений (например, солнечные очки рисуют поверх головы, а не сзади), просто убедитесь, что изображения находятся в правильном порядке в массиве ListOfImagesToDraw. Этот массив будет генерироваться информацией в обратной передаче.