Создание аватара с использованием предопределенных наборов изображений - PullRequest
3 голосов
/ 19 марта 2012

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

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

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

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

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

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

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

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

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

Соответствующие вопросы:

Gravatar или PHP не варианты!

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

1 Ответ

2 голосов
/ 23 марта 2012

Вы можете использовать простой 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 массив. Этот массив будет сгенерирован информацией из обратной передачи.

...