使用预定义的图像集创建头像

Question

这个问题更多的是关于指导而不是实际解决我的问题：

我需要使用大量分类图像在C#中创建一个头像创建者。

概念上非常直截了当，但我从未在代码中处理过图像，所以我需要一些技巧和指针。

我设想它的工作方式是系统有两个部分：

1. 使用HTML+CSS 允许用户选择和定位多个图像的前端
2. 保存操作将这些图像/图层及其位置发送到服务器，然后将它们作为平面图像文件写出

现在，这是我对这样一个系统应该如何工作的假设。如果没有，我们将不胜感激提示/指针。

继续假设：

我有一种模糊的感觉，我需要使用Canvas 在客户端创建第一部分的图像。虽然这带来了浏览器支持的问题。 Canvas 会是这里的解决方案，还是我最好使用普通的HTML4+CSS2。稍微回溯一下，Canvas 会不会给它带来任何好处？我在 Google 的反馈/问题报告系统中看到了Canvas 的强大功能，他们使用这个元素来做客户端截图！

对于第二部分，我不知道。当我问这个问题时，我正在阅读/研究 C# 中的图像创建和诸如 GDI+ 和 Image Library 之类的术语正在弹出。

相关问题：

• C#: Save multiple images to a single file
• Are there any composite-avatar scripts that I could steal or take a look at?
• jQuery/JavaScript Library for avatar creation?

Gravatar 或 PHP 不是选项！

PS：我希望根据我的研究/发现和 SO 社区提供的任何帮助来编辑这个问题，但我相信这不是这样的讨论。由于我对 SO 的研究没有提供太多线索，我相信我们可以将其作为一个社区 Wiki，将最佳答案/建议合并到一篇文章中。谢谢。

Answer 1

您可以使用带有回发的简单 ASP/HTML，根据他们从组合框和其他控件中选择的不同选项来显示图像。

回发仍然会导致他们的浏览器重新下载包含新图像的页面的短暂延迟。一种选择是您可以使用 AJAX 仅下载新图像而无需重新加载整个页面。这可能会在不需要 Flash/Silverlight 的情况下提供最佳体验。

您将拥有多少种不同的图像组合？您可以以编程方式预先计算所有可能的组合并存储它们。这会占用更多存储空间，但处理能力会降低，回发速度也会稍快。

如果您想为每个请求生成一个图像，您可以使用以下方法在 Bitmap 上绘制每个图像：

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 中的顺序正确大批。该数组将由回发中的信息生成。