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

亦凉 2021-05-12 11:54 472阅读 0赞

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

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

# 一、文字转图片实现 #

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

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

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

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

![SouthEast][]

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

#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][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的页面数据加载完成之后的函数，大家可以借鉴一下。

[SouthEast]: /images/20210511/82c570f721ce43b49fa013178208aa77.png
[http_download.csdn.net_detail_tr1912_9829743]: http://download.csdn.net/detail/tr1912/9829743