积分系统——实现文字到图片的转化

        小编最近在做的积分系统中，前后台用户登陆后需要有一个头像作为用户的代表，那么小编就开始想，如何让我们自动生成不同的用户不同的头像呢？

        首先自然是想到了QQ，他带了很多的内置头像，可是不是那么的正规，那么一个企业用的应用头像应该是怎样的呢，然后就想到了今目标这个软件，这个软件会把每个人的名字中的一个字来作为这个人的默认头像，所以我也就开始了对于这个文字转化为图片的研究了。

一、文字转图片实现

        从网上查了一查，基本上说的都是文字转换为bitmap的位图比较方便，所以就用文字转位图的方式吧。接下来就是在网上各种找资料，网上说的都大同小异，在这里简单说一下：

    首先是需要获得需要转换的字符，这个好说，目前的项目中从session中获取就好。

    然后就是截取名字，这个通过比较发现图片中一个字做头像为宜，并且用最后一个字也不怕重复，所以果断的就决定了。

    然后就是对于图片截取的一个应用，这里是用一个C/S的小程序来做的例子，窗体如下：

其中比较核心的代码如下：

        #region 把文字转换成Bitmap
        /// <summary>
        /// 把文字转换成Bitmap
        /// </summary>
        /// <param name="text"></param>
        /// <param name="font"></param>
        /// <param name="rect">用于输出的矩形，文字在这个矩形内显示，为空时自动计算</param>
        /// <param name="fontcolor">字体颜色</param>
        /// <param name="backColor">背景颜色</param>
        /// <returns></returns>
        private Bitmap TextToBitmap(string text, Font font, Rectangle rect, Color fontcolor, Color backColor)
        {
            Graphics g;
            Bitmap bmp;
            StringFormat format = new StringFormat(StringFormatFlags.NoClip);
            if (rect == Rectangle.Empty)
            {
                bmp = new Bitmap(1, 1,PixelFormat.Format32bppRgb);
                bmp.SetResolution(300.0F, 300.0F);  //改变像素密度
                g = Graphics.FromImage(bmp);
                //计算绘制文字所需的区域大小（根据宽度计算长度），重新创建矩形区域绘图
                SizeF sizef = g.MeasureString(text, font, PointF.Empty, format);

                int width = (int)(sizef.Width + 1);
                int height = (int)(sizef.Height + 1);
                rect = new Rectangle(0, 0, width, height);
                bmp.Dispose();

                bmp = new Bitmap(width, height, PixelFormat.Format32bppRgb);
                bmp.SetResolution(300.0F, 300.0F);//改变像素密度

            }
            else
            {
                bmp = new Bitmap(rect.Width, rect.Height, PixelFormat.Format32bppRgb);
                bmp.SetResolution(300.0F, 300.0F);    //改变像素密度
            }

            g = Graphics.FromImage(bmp);

            //使用ClearType字体功能
            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
            g.FillRectangle(new SolidBrush(backColor), rect);
            g.DrawString(text, font, Brushes.White, rect, format);
            return bmp;
        }
        #endregion

        需要注意的是，如果想要用这个代码，命名空间需要引用System.Drawing;  和System.Drawing.Imaging;  只有这样才能运行相应的图像类型。

        特别强调的是，这个里面的函数和转换之后的图片大小都是随着文字的字体决定的，所以有一定的限制，并且在没有特别限制像素密度的时候，像素密度总是为97，所以我自己添加了一些改变像素密度的代码，可以让图片更加细腻。（注释中有）

这个demo的连接奉上，欢迎大家学习讨论。http://download.csdn.net/detail/tr1912/9829743

二、如何套在网页上

        我们都知道，在网页上，图片是要放在<img/>这个标签中的，所以为了让名字不同的时候出现不同的头像，就需要吧这个显示图片的方法写活，经过多方查找，终于找到了一个比较好的方法，就是在窗体加载时候通过MVC的自带@来获得session中的姓名，然后再用JS来给img标签附上图片，方法如下：

HTML如下：

<a data-toggle="dropdown" class="dropdown-toggle" href="#">
     <img id="headPic" alt="" class="admin-pic img-circle" src="/">Hi, @Session["userName"]
     <div id="UserName" hidden="hidden">@Session["userName"]</div>
</a>  

页面加载的时候js如下：

$.parser.onComplete = function () {
    var img = document.getElementById('headPic');
    var userName = document.getElementById('UserName');
    img.src = "/content/IMG/" + userName.innerHTML + ".jpg";
}

        其中，这段JS需要放在body的最下面的地方才可以，因为需要在加载页面完成之后才可以显示图片所以需要注意着一点，并且上面这个js的函数是easyUI的页面数据加载完成之后的函数，大家可以借鉴一下。