ASP.NET中基本的圖像操作


原文地址:[url]http://www.worldofasp.net/tut/GDI/Basic_of_GDI%20_and_Graphics_in_ASPNET_119.aspx[/url],版權歸原作者所有。

      GDI+技術在Windows應用程序中應用十分廣泛,深受Windows應用程序開發人員的喜愛。在.NET平臺下,GDI+的某些新特性使Web開發人員同樣享有這樣的權利,可以在自己的Web應用程序中方便的繪製各種圖形。你只需調用幾個簡單的Windows Api函數就可完成各種基本的圖像操作。

使用GDI+在ASP.NET中繪製圖形
      下面這個例子演示瞭如何在ASP.NET中繪製矩形、三角形等簡單的圖形。首先新建一個.aspx文件,取名爲Image.aspx,添加對 System.Drawing and System.Drawing.Imaging的引用,將下面的代碼複製到Page_Load事件中。

Bitmap bmp = new Bitmap(100, 300);
Graphics dc = Graphics.FromImage(bmp);
Pen bluePen = new Pen(Color.Blue, 3);
dc.DrawRectangle(bluePen, 0, 0, 50, 50);

  Pen redPen = new Pen(Color.Red, 2);
dc.DrawEllipse(redPen, 0, 50, 80, 60);
Response.ContentType = "image/gif";
bmp.Save(Response.OutputStream, ImageFormat.Gif);

       在上面的代碼中,繪製了一個長寬都爲50的矩形和一個寬80、高50的三角形。當你在瀏覽器中打開這個頁面時,你看到的是一個圖片類型的文件。如果你在頁面中添加“This is  my image!”這樣的文字,在瀏覽器中是無法顯示的,原因是這個文件的輸出流被設置成了
ImageFormat.Gif。要解決這個問題,只需創建一個新的頁面,取名Test.aspx,然後加入這樣的代碼:

This is my image
<BR>
<img src="Image.aspx" />

使用GDI+在ASP.NET中繪製字符
       有些時候,我們希望網頁中的某些文字以圖片的形式出現,比如郵件地址等。代碼如下:
Image.aspx
Bitmap bmp = new Bitmap(300, 30);
Graphics dc = Graphics.FromImage(bmp);
Font f = new Font("Verdana", 11);
dc.DrawString("[email][email protected][/email]", f, Brushes.Yellow, 0, 0);
bmp.Save(Response.OutputStream, ImageFormat.Gif);
Test.aspx
Please email me at
<BR />
<IMG src="Image.aspx" />

使用GDI+生成圖片驗證碼
       有網站開發經驗的人對驗證碼都不會陌生,這主要是用於防止用戶使用機器人程序註冊多個帳號。在.NET出現以前,生成驗證碼需要我們自己編寫大量的代碼,現在使用GDI+可以在ASP.NET中很方便的實現這個功能。

Random Rand = new Random();
// Create a new random number between the specified range
int iNum= Rand.Next(10000, 99999);
Bitmap Bmp = new Bitmap(90, 50);
Graphics gfx = Graphics.FromImage(Bmp);
Font fnt = new Font("Verdana", 12);

// Draw the random number
gfx.DrawString(RandNum.ToString(), fnt, Brushes.Yellow, 15, 15);
Bmp.Save(Response.OutputStream, ImageFormat.Gif);

效果圖:


       在上面的代碼中,系統隨機生成一個10000至99999的數字,並以圖片格式輸出到網頁中。用戶註冊時需在文本框中輸入圖片中顯示的字符,經過系統驗證後方可完成註冊。但現在的機器人程序越來越智能化,簡單的驗證碼很容易被破解,我們需要在圖片中加上一些干擾,增加機器識別的難度。

Random Rand = new Random();
int iNum = Rand.Next(10000, 99999);
Bitmap Bmp = new Bitmap(90, 50);
Graphics Gfx = Graphics.FromImage(Bmp);
Font Fnt = new Font("Verdana", 12, FontStyle.Bold);
Gfx.DrawString(iNum.ToString(), Fnt, Brushes.Yellow, 15, 15);
// Create random numbers for the first line
int RandY1 = Rand.Next(0, 50);
int RandY2 = Rand.Next(0, 50);

// Draw the first line
Gfx.DrawLine(Pens.Yellow, 0, RandY1, 90, RandY2);
// Create random numbers for the second line
RandY1 = Rand.Next(0, 50);
RandY2 = Rand.Next(0, 50);
// Draw the second line
Gfx.DrawLine(Pens.Yellow, 0, RandY1, 90, RandY2);
Bmp.Save(Response.OutputStream, ImageFormat.Gif);
Session["Number"] = iNum;

效果圖:


.aspx文件部分的代碼:
<SCRIPT RUNAT=server>
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (txtNumber.Text.Trim() == Session["Number"].ToString().Trim())
        {
            Response.Write("Match");
        }
        else
        {
            Response.Write("Not Match");
        }
    }
</SCRIPT>
<BODY>
    <FORM ID="form1" RUNAT="server">
        <DIV>
            <BR />
            <IMG src="Default.aspx" />
            <BR />
            Please Enter the Image number
            <ASP:TEXTBOX ID="txtNumber" RUNAT="server"></ASP:TEXTBOX></DIV>
        <ASP:BUTTON ID="Button1" RUNAT="server" TEXT="Button" ONCLICK="Button1_Click" />
    </FORM>
</BODY>

最終的運行效果:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章