.Net 利用 Graphics 自動產生 透明背景 及 文字 的PNG圖檔 .Net 利用 Graphics 自動產生 透明背景 及 文字 的PNG圖檔
  .NET       ez      2012-09-10

本篇利用C#內建的繪圖Graphics,將文字轉為圖片!

可以用於網站上的特殊文字,解決對方也需安裝字形才能顯示問題。

首先產生一個空白網頁,加上 img 的 tag,路徑為另外一個aspx,如下圖:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
    body {
	    background-color: #000;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <img src="ImageString.aspx" alt="" />
    </form>
</body>
</html>

再新增一個網頁ImageString.aspx,將.aspx內容清除,只留下第一行。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageString.aspx.cs" Inherits="WebApplication1.ImageString" %>

將 ImageString.aspx.cs 修改為:

using System;
using System.Drawing;
using System.Drawing.Imaging;

namespace WebApplication1
{
    public partial class ImageString : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //圖片輸出MemoryStream
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            Image_String("中文測試", 20, true, Color.FromArgb(255, 255, 255), Color.FromArgb(255, 255, 0)).Save(ms, ImageFormat.Png);
            Response.ClearContent();
            Response.ContentType = "image/png";
            Response.BinaryWrite(ms.ToArray());
        }

        protected Bitmap Image_String(string font, int font_size, bool font_bold, Color bgcolor, Color color)
        {
            Font f = new System.Drawing.Font("微軟正黑體", font_size, font_bold ? System.Drawing.FontStyle.Bold : System.Drawing.FontStyle.Regular); //文字字型
            Brush b = new System.Drawing.SolidBrush(color); //文字顏色

            //計算文字長寬
            int img_width = 0, img_height = 0;
            using (Graphics gr = Graphics.FromImage(new Bitmap(1, 1)))
            {
                SizeF size = gr.MeasureString(font, f);
                img_width = Convert.ToInt32(size.Width);
                img_height = Convert.ToInt32(size.Height);
                gr.Dispose();
            }

            //圖片產生
            Bitmap image = new Bitmap(img_width, img_height);

            //填滿顏色並透明
            using (Graphics g = Graphics.FromImage(image))
            {
                g.Clear(bgcolor);
                image = Image_ChangeOpacity(image, 0.5f);
                g.Dispose();
            }

            //文字寫入
            using (Graphics g = Graphics.FromImage(image))
            {
                g.DrawString(font, f, b, 0, 0);
                g.Dispose();
            }

            return image;
        }

        protected Bitmap Image_ChangeOpacity(Image img, float opacityvalue)
        {
            Bitmap bmp = new Bitmap(img.Width, img.Height);
            Graphics graphics = Graphics.FromImage(bmp);
            ColorMatrix colormatrix = new ColorMatrix();
            colormatrix.Matrix33 = opacityvalue;
            ImageAttributes imgAttribute = new ImageAttributes();
            imgAttribute.SetColorMatrix(colormatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
            graphics.DrawImage(img, new Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, imgAttribute);
            graphics.Dispose();
            return bmp;
        }
    }
}

執行結果:

只要透過 Graphics 產生文字圖片,網頁就不會再像已往只有 "新細明體" 了!  

發現如果將圖片設為透明 Color.Transparent,會有嚴重的鋸齒狀況發生,此時只要修改 Graphics 即可,如下:

Graphics g = Graphics.FromImage(image);
g.InterpolationMode = InterpolationMode.High; //設定高品質插值法
g.SmoothingMode = SmoothingMode.HighQuality; //設定高品質,低速度呈現平滑程度
g.CompositingQuality = CompositingQuality.HighQuality;
g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias; //此行文字反鋸齒

標籤:   .NET

我要留言