.NET下Graphics之文字圖片處理

最近因為需要用到圖片制作，所以重拾了一下Graphics的相關操作。我們的目的是輸入一串字符串，使用特殊字體，生成一張奇數位文字左傾斜15度，偶數位文字右傾斜15度的圖片。

1.使用自定義字體（因為字體現在有版權問題，在使用過程中，先確定是否已取得版權）。將自定義字體加入到字體序列集合(PrivateFontCollection)中，並返回其FontFamily，注意，字體路徑一定要絕對路徑。如下代碼：

/// <summary>
        /// 添加字體文件到客戶字符集合中，並返回當前FontFamily
        /// </summary>
        /// <param name="fontPath">字體文件絕對路徑</param>

        /// <returns></returns>
        public FontFamily AddFontToFamily(string fontPath)
        {
            if (string.IsNullOrWhiteSpace(fontPath) || !System.IO.File.Exists(fontPath))
            {
                return  new FontFamily("黑體");//沒有傳字體文件，或字體文件不存在，則直接返回系統默認的黑體。
            }
            PrivateFontCollection pfc=new PrivateFontCollection();
            pfc.AddFontFile(fontPath);
            var idxCurrentFont = pfc.Families.Length - 1;
            return pfc.Families[idxCurrentFont];
        }

2.文字處理：

2.1.文字編輯，新建Font對象：　

/// <summary>
        /// 相對路徑轉絕對路徑
        /// </summary>
        /// <param name="path"></param>
        /// <returns></returns>
        public string RelativeToAbsPath(string path)
        {
            return  AppDomain.CurrentDomain.BaseDirectory + path.Replace("/", "\\");
        }

/// <summary>
        /// 使用自定義字符集
        /// </summary>
        /// <param name="fontFamily">使用字符集</param>
        /// <param name="fontSize">字符大小</param>
        /// <param name="fontStyle">字符樣式</param>
        /// <returns>字符及樣式</returns>
        public Font UseCustomFont(FontFamily fontFamily, int fontSize, FontStyle fontStyle = FontStyle.Regular)
        {
            var font = new Font(fontFamily, fontSize, FontStyle.Regular);
            return font;
        }

2.2.繪制文字，因為每個字可能定義的樣式不同，所以這里采用愚笨的方法，單字處理：

/// <summary>
        /// 生成正規的單個文字圖片（不做任何處理）
        /// </summary>
        /// <param name="font">字體</param>
        /// <param name="content">內容</param>
        /// <param name="fontSize">字體大小</param>
        /// <param name="fontColor">字符顏色</param>
        /// <param name="deg">傾斜角度</param>
        /// <returns></returns>
        public Bitmap CreateOneTxtImg(Font font, string content, int fontSize,Color fontColor,int deg=0)
        {

            int mapWidth = fontSize + 200;

            int mapHeight = fontSize + 200;

            Bitmap bitmap = new Bitmap(mapWidth, mapHeight);

            Graphics graphics = Graphics.FromImage(bitmap);

            graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;//消除鋸齒，枚舉值

            graphics.Clear(Color.Transparent);//設置圖片背景色為透明，枚舉值，或自定義

            var brush=new SolidBrush(fontColor);//畫筆並設置顏色
            
            graphics.DrawString(content, font, brush, 0, 0);

            //獲取字符寬高
            SizeF sizeF = graphics.MeasureString(content, font);

            
#if DEBUG 
            //查證是否和實際字符大小有差距
            graphics.DrawRectangle(new Pen(Color.Chartreuse), new Rectangle(0, 0, (int)sizeF.Width, (int)sizeF.Height));
            //保存圖片看效果
            string uploadFileDirectory = "/tempuploads/usernames";
            string fileName = uploadFileDirectory + "/" + TimeStampServices.CurrentTimeSeconds().ToString() + UtilServices.CreateNonceStr(3) + ".png";
            string filePath = AppDomain.CurrentDomain.BaseDirectory + fileName.Replace("/", "\\");
            if (System.IO.File.Exists(filePath))
            {
                System.IO.File.Create(filePath).Close();
            }
            bitmap.Save(filePath, System.Drawing.Imaging.ImageFormat.Png);
#endif

            return bitmap;
        }

上述代碼中為什么要加200的大小，是因為文字雖然設定了文字大小，但是實際大小並不是n*n的正方形，並且最終生成的字大小我們沒法確定。Graphics.MeasureString測出來的也會有偏差我們看看實際效果，如下圖，我們發現使用文字繪制四周會有留空，而且中英文的差異也是顯而易見,暫時沒找到精確計算字符寬高處理。現階段可以想到的方案是截掉空白位置，但是需要測量，不能保證所有文字空白位置都是一定的值。這里不做此處理。

既然Graphics.MeasureString獲取到的大小必然會大於文字的實際繪制大小，那么我們就用它的大小作為最終的顯示大小進行處理（旋轉）。

2.2.1.把文字范圍外的內容裁掉,因為我們是從(0,0)位置寫的文字，所以我們可以使用Graphics.DrawImage(img,0,0)進行處理：

/// <summary>
        /// 圖片裁剪及旋轉操作
        /// </summary>
        /// <param name="textSize">內容大小</param>
        /// <param name="tempBitmap">內容</param>
        /// <returns></returns>
        public Bitmap ClipImg(SizeF textSize, Bitmap tempBitmap)
        {
            Bitmap bitmap = new Bitmap((int)textSize.Width, (int)textSize.Height);
            Graphics graphics = Graphics.FromImage(bitmap);
            graphics.Clear(Color.Transparent);
            graphics.DrawImage(tempBitmap, 0, 0);//
            graphics.Dispose();
            return bitmap;
        }

2.2.2.裁剪后進行旋轉，獲取旋轉后的寬高，這里需要用到三角函數處理（sin(a+b),sin(a-b)）的內容，大家可以補一下，不再贅述整個推導過程。需要注意的是，sin及cos用的度數值都是弧度制，所以需要先把度數轉成弧度。代碼如下：

/// <summary>
        /// 獲取旋轉后的寬高
        /// </summary>
        /// <param name="width">原始寬</param>
        /// <param name="height">原始高</param>
        /// <param name="deg">旋轉的角度</param>

        public static SizeF GetRotateSize(int width, int height, int deg)
        {
            double radian = (deg * Math.PI / 180); ;
            double cos = Math.Cos(radian);
            double sin = Math.Sin(radian);
            float newWidth = (float)(Math.Abs(width * cos) + Math.Abs(height * sin));
            float newHeight = (float)(Math.Abs(width * sin) + Math.Abs(height * cos));
            return new SizeF(newWidth, newHeight);
        }

2.2.3.圖片旋轉。因為我們是Graphics坐標系中，坐標原點(0,0)是在左上方，所以我們做的處理時：1.把坐標原點移至中心點;2.畫布旋轉n度;3.把坐標原點移回原坐標原點。有兩套方案進行這個操作：

1.矩陣旋轉：

 Matrix matrix = graphics.Transform;
 matrix.RotateAt(deg, new PointF(旋轉點x, 旋轉點y);
 graphics.Transform = matrix;

 

2.設置graphics:

int moveX=偏移量x;
int moveY=偏移量y;
graphics.TranslateTransform(moveX, moveY);
graphics.RotateTransform(deg);
graphics.TranslateTransform(-moveX, -moveY);

因為我們的畫布大小是圖片經過旋轉后外接矩形的大小，所以此時繪圖的初始坐標應該是((int)(旋轉后畫布大小寬/ 2 - 內容寬 / 2), (int)(旋轉后畫布大小高/ 2 - 圖片高 / 2)),關於這個點，大家也自行腦補一下，不再贅述。采用2.2.3 方法一進行旋轉代碼如下：

/// <summary>
        /// 圖片旋轉操作
        /// </summary>
        /// <param name="textSize">內容大小</param>
        /// <param name="tempBitmap">內容</param>
        /// <param name="deg">旋轉角度</param>
        /// <returns></returns>
        public Bitmap RotateImg(SizeF textSize,Bitmap tempBitmap,int deg)
        {
            var sizeF = GetRotateSize(textSize.Width, textSize.Height, deg);

            Bitmap bitmap = new Bitmap((int)sizeF.Width, (int)sizeF.Height);

            Graphics graphics = Graphics.FromImage(bitmap);

            graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;//消除鋸齒，枚舉值

            graphics.Clear(Color.Transparent);//設置圖片背景色為透明，枚舉值，或自定義


            Matrix matrix = graphics.Transform;
            matrix.RotateAt(deg, new PointF((float)bitmap.Width / 2, (float)bitmap.Height / 2));
            graphics.Transform = matrix;
 
            graphics.DrawImage(tempBitmap, new Rectangle((int)(bitmap.Width / 2 - tempBitmap.Width / 2), (int)(bitmap.Height / 2 - tempBitmap.Height / 2), tempBitmap.Width, tempBitmap.Height));

            graphics.ResetTransform();

            graphics.Dispose();

            return bitmap;

           
        }

此時，我們修改一下2.2的CreateOneTxtImg方法：

/// <summary>
        /// 生成正規的單個文字圖片（不做任何處理）
        /// </summary>
        /// <param name="font">字體</param>
        /// <param name="content">內容</param>
        /// <param name="fontSize">字體大小</param>
        /// <param name="fontColor">字符顏色</param>
        /// <param name="deg">傾斜角度</param>
        /// <returns></returns>
        public Bitmap CreateOneTxtImg(Font font, string content, int fontSize,Color fontColor,int deg=0)
        {

            int mapWidth = fontSize + 200;

            int mapHeight = fontSize + 200;

            Bitmap bitmap = new Bitmap(mapWidth, mapHeight);

            Graphics graphics = Graphics.FromImage(bitmap);

            graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;//消除鋸齒，枚舉值

            graphics.Clear(Color.Transparent);//設置圖片背景色為透明，枚舉值，或自定義

            var brush=new SolidBrush(fontColor);//畫筆並設置顏色
            
            graphics.DrawString(content, font, brush, 0, 0);

            //獲取字符寬高
            SizeF sizeF = graphics.MeasureString(content, font);

            var clipBitmap = ClipImg(sizeF, bitmap);
            bitmap.Dispose();
            graphics.Dispose();
            var rotateBitmap = RotateImg(sizeF, clipBitmap, deg);
            clipBitmap.Dispose();
#if DEBUG 
            //查證是否和實際字符大小有差距
            //graphics.DrawRectangle(new Pen(Color.Chartreuse), new Rectangle(0, 0, (int)sizeF.Width, (int)sizeF.Height));
            //保存圖片看效果
            string uploadFileDirectory = "/tempuploads/usernames";
            string fileName = uploadFileDirectory + "/" + TimeStampServices.CurrentTimeSeconds().ToString() + UtilServices.CreateNonceStr(3) + ".png";
            string filePath = AppDomain.CurrentDomain.BaseDirectory + fileName.Replace("/", "\\");
            if (System.IO.File.Exists(filePath))
            {
                System.IO.File.Create(filePath).Close();
            }
            rotateBitmap.Save(filePath, System.Drawing.Imaging.ImageFormat.Png);
#endif

            return bitmap;
        }

可以看到，如下效果：

基本操作已經完成，最后我們計算每個字的寬總和，以及字圖的高度最大值，生成最終的圖片。

/// <summary>
        /// 內容最終寬高
        /// </summary>
        /// <param name="bitmaps">所有內容</param>
        /// <returns></returns>

        public Size GetAllWidthAndHeihgt(List<Bitmap> bitmaps)
        {
            int width = 0;
            int height = 0;
            foreach (var item in bitmaps)
            {
                width += item.Width;
                if (item.Height > height)
                {
                    height = item.Height;
                }
            }
            return new Size(width, height);
        } 

內容整合：

/// <summary>
        /// 文轉圖
        /// </summary>
        /// <param name="fontPath">字體相對路徑</param>
        /// <param name="fontSize">字體大小</param>
        /// <param name="fontColor">字符顏色</param>
        /// <param name="textContent">需處理的內容</param>
        /// <param name="filePath">生成的圖片路徑</param>
        /// <returns></returns>
        public bool TextToImg(string fontPath, int fontSize, Color fontColor, string textContent = "", string filePath = "")
        {
            if (string.IsNullOrWhiteSpace(fontPath) || string.IsNullOrWhiteSpace(textContent))
            {
                return false;
            }

            fontPath = RelativeToAbsPath(fontPath);

            if (fontColor.IsEmpty)
            {
                fontColor = Color.FromArgb(255, 255, 255, 255);
            }

            var fontFamily = AddFontToFamily(fontPath);

            var font = UseCustomFont(fontFamily, fontSize);

            List<Bitmap> lstTextImg = new List<Bitmap>();

            foreach (var txt in textContent)
            {
                var idxInContent = textContent.IndexOf(txt);//當前字符在字符串的索引位置
                int deg = -15;
                if (idxInContent % 2 == 1)
                {
                    deg = 15;
                }
                var bitMap = CreateOneTxtImg(font, txt.ToString(), fontSize, fontColor, deg);
                lstTextImg.Add(bitMap);
            }
            Bitmap endBitmap = CreateResult(lstTextImg);
            endBitmap.Save(filePath, ImageFormat.Png);

            endBitmap.Dispose();

            return true;
        }

 

調用示例，記得生成文件時要釋放文件資源，否則會一直被占用中：

/// <summary>
        /// 文轉圖接口測試
        /// </summary>
        /// <param name="fontColor">字符顏色</param>
        /// <param name="fontSize">字符大小</param>
        /// <param name="textContent">字符串內容</param>
        /// <returns></returns>
        public ActionResult TextToImgTest(string fontColor, int fontSize = 60, string textContent = "測試123avenAVEN")
        {
            Color color = Color.Red;
            if (!string.IsNullOrWhiteSpace(fontColor))
            {
                string[] argb = fontColor.Split(new char[] {','});
                if (argb.Length == 4)
                {
                    color = Color.FromArgb(int.Parse(argb[0]), int.Parse(argb[1]), int.Parse(argb[2]),
                        int.Parse(argb[3]));
                }
            }
            //最終保存圖片的地址
            string uploadFileDirectory = "/tempuploads/usernames";
            if (Directory.Exists(uploadFileDirectory))
            {
                Directory.CreateDirectory(uploadFileDirectory);
            }
            string fileName = uploadFileDirectory + "/" + TimeStampServices.CurrentTimeSeconds().ToString() + UtilServices.CreateNonceStr(3) + ".png";
            string filePath = AppDomain.CurrentDomain.BaseDirectory + fileName.Replace("/", "\\");

            if (!System.IO.File.Exists(filePath))
            {
                System.IO.File.Create(filePath).Close();//創建完后記得釋放，否則資源被占用
            }

            bool result = TextToImg("/fonts/mfxingyan-noncommercial-regular.ttf", fontSize, color, textContent, filePath);
            return Content(result.ToString());
        }

End

 

本文應該有很多不細膩的地方，比如文字處理方面，獲取大小的精度問題，請大家多多指教，如有不對的地方，請指出。有更好的方案處理，也請不吝賜教，感恩！