יצירת תמונה בזמן ריצה

ירדן שם טוב ‏ • 27 באפריל, 2004

במאמר זה אני אסביר כיצד להשתמש ב Drawing (ציור) כדי לייצר תמונות .
ניצור דף בשם drawImage.aspx
ראשית נגדיר את מרחבי השמות הדרושים לנו:

1
2

<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing.Text" %>

כעת ניצור את החלק של הhtml שבו נשים תיבות טקסט בשביל לקבוע את מאפייני התמונה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<form runat=server>
Text
<asp:textbox runat=server id=tbatext /><br>
Width
<asp:textbox runat=server id=tbawidth /><br>
Height
<asp:textbox runat=server id=tbaheight /><br>
Background color

<asp:dropdownlist runat=server id=ddlbgcolor>
<asp:listitem>Red</asp:listitem>
<asp:listitem>Black</asp:listitem>
<asp:listitem>White</asp:listitem>
<asp:listitem>blue</asp:listitem>
<asp:listitem>orange</asp:listitem>
<asp:listitem style=background–color:red>yellow</asp:listitem>
<asp:listitem>gray</asp:listitem>
<asp:listitem>pink</asp:listitem>
<asp:listitem>green</asp:listitem>
</asp:dropdownlist>
<br>
font name

<asp:dropdownlist runat=server id=ddlfontname>
<asp:listitem>Miriam</asp:listitem>
<asp:listitem>arial</asp:listitem>
<asp:listitem>verdana</asp:listitem>
</asp:dropdownlist>
<br>
Font color

<asp:dropdownlist runat=server id=ddlfontcolor>
<asp:listitem>Red</asp:listitem>
<asp:listitem>Black</asp:listitem>
<asp:listitem>White</asp:listitem>
<asp:listitem>blue</asp:listitem>
<asp:listitem>orange</asp:listitem>
<asp:listitem>yellow</asp:listitem>
<asp:listitem>gray</asp:listitem>
<asp:listitem>pink</asp:listitem>
<asp:listitem>green</asp:listitem>
</asp:dropdownlist>
<br>
Font size

<asp:dropdownlist runat=server id=ddlfontsize>
<asp:listitem>6</asp:listitem>
<asp:listitem>8</asp:listitem>
<asp:listitem>10</asp:listitem>
<asp:listitem>12</asp:listitem>
<asp:listitem>14</asp:listitem>
<asp:listitem>16</asp:listitem>
<asp:listitem>18</asp:listitem>
<asp:listitem>20</asp:listitem>
<asp:listitem>26</asp:listitem>
<asp:listitem>32</asp:listitem>
<asp:listitem>40</asp:listitem>
</asp:dropdownlist>
<br>

<P>
<asp:button onclick=makeimage text=Create! runat=server />
</form>

חלק זה הוא פשוט יצרנו כמה תיבות טקסט,רשימות נגללות וכפתור שיביא אותנו לשיגרה makeimage שעכשיו נכין אותה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Sub makeimage(sender As Object, e As EventArgs)
    Dim aText As String
    atext = tbatext.text
    Dim aWidth As Integer = tbawidth.text
    Dim aHeight As Integer = tbaheight.text
    Dim aBgColor As Drawing.Color = Drawing.ColorTranslator.FromHtml(ddlbgcolor.SelectedItem.text)
    Dim aFont As New Drawing.Font(ddlfontname.selecteditem.text, ddlfontsize.selecteditem.text,Drawing.FontStyle.regular, Drawing.GraphicsUnit.Pixel)
    Dim aFontColor As Drawing.Color = Drawing.ColorTranslator.FromHtml(ddlfontcolor.SelectedItem.text)
    Dim b As New Drawing.Bitmap(aWidth, aHeight, Drawing.Imaging.PixelFormat.Format24bppRgb)
    Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(b)
    g.Clear(aBgColor)
    g.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias
    Dim SFormat As New Drawing.StringFormat
    SFormat.Alignment = Drawing.StringAlignment.Center
    g.DrawString(aText, aFont, New Drawing.SolidBrush(aFontColor), b.Width / 2, 5, SFormat)
    Response.Clear()
    Response.ContentType = "Image/gif"
    b.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.gif)
    b.Dispose()
    Response.Flush()
    Response.End()
end sub

הסבר

הגדרנו משתנה בשם aText שיהיה שווה לתוכן תייבת בטקסט tbatext
הגדרנו שני משתנים בשביל לקבוע את אורך ורוחב התמונה שיהיו שווים לתיבות הטקסט tbawidth(רוחב) tbaheight(אורך)
אחר כל יש לנו משתנה בשם abgcolor שהוא חלק מdrawing.color שדרוש לנו כדי להכניס את החלק של הצבע והוא שווה לפריט הנבחר ברשימה ddlbgcolor
עכשיו מגדירים את החלק של הפונט בתוך הסוגריים אנו מגדירים 4 דברים:
- שם הפונט שיהיה שווה לפריט הנבחר ברשימה ddlfontname
- את גודל הפונט שיהיה שווה לפריט הנבחר ברשימה ddlfontsize
- את ה עיצוב הפונט (בולט,קו תחתון,רגיל,נטוי)
- לבסוף את סוג הרישום שהוא כרגע בעזרת פיקסלים
אחר נגדיר את צבע הטקסט שיהיה שווה לפריט הנבחר ברשימה ddlfontcolor

גמרנו את החלק העיצובי עכשיו מגיעים לחלק שצריך לייצר את התמונה:
הגדרנו משתנה בשם b שהוא ייצר לנו את התמונה הגדרנו לתוכו את רוחב ואורך התמונה את ואת הפורמט שלה
אחר כך בגדרנו את g שהוא לוקח נתונים מb בשביל לספק את החלק הגרפי של התמונה
בשורות הבאות מגדירים עוד כמה מאפיינים לg כגון דרך התצוגה של התמונה האם היא תהיה מפוקסלת או לא, כאן בחרתי שלא תהיה אלא תהיה antialias
עכשיו מגיעים לחלק של לקבוע את מבנה התמונה הalign של הטקסט יהיה באמצע

כעת משלבים את הכל ביחד בעזרת g ומדפיסים על ידי b על המסך כתמונת gif

הינה קוד הדף drawImage.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<%@ Page Language="vb" Debug=true %>
<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing.Text" %>

<script runat="server" language="vb">
Sub makeimage(sender As Object, e As EventArgs)
    Dim aText As String
    atext = tbatext.text
    Dim aWidth As Integer = tbawidth.text
    Dim aHeight As Integer = tbaheight.text
    Dim aBgColor As Drawing.Color = Drawing.ColorTranslator.FromHtml(ddlbgcolor.SelectedItem.text)
    Dim aFont As New Drawing.Font(ddlfontname.selecteditem.text, ddlfontsize.selecteditem.text,Drawing.FontStyle.regular, Drawing.GraphicsUnit.Pixel)
    Dim aFontColor As Drawing.Color = Drawing.ColorTranslator.FromHtml(ddlfontcolor.SelectedItem.text)
    Dim b As New Drawing.Bitmap(aWidth, aHeight, Drawing.Imaging.PixelFormat.Format24bppRgb)
    Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(b)
    g.Clear(aBgColor)
    g.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias
    Dim SFormat As New Drawing.StringFormat
    SFormat.Alignment = Drawing.StringAlignment.Center
    g.DrawString(aText, aFont, New Drawing.SolidBrush(aFontColor), b.Width / 2, 5, SFormat)
    Response.Clear()
    Response.ContentType = "Image/gif"
    b.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.gif)
    b.Dispose()
    Response.Flush()
    Response.End()
end sub
</script>

<form runat=server>
    Text
    <asp:textbox runat=server id=tbatext /><br>
    Width
    <asp:textbox runat=server id=tbawidth /><br>
    Height
    <asp:textbox runat=server id=tbaheight /><br>
    Background color

    <asp:dropdownlist runat=server id=ddlbgcolor>
    <asp:listitem>Red</asp:listitem>
    <asp:listitem>Black</asp:listitem>
    <asp:listitem>White</asp:listitem>
    <asp:listitem>blue</asp:listitem>
    <asp:listitem>orange</asp:listitem>
    <asp:listitem style=background–color:red>yellow</asp:listitem>
    <asp:listitem>gray</asp:listitem>
    <asp:listitem>pink</asp:listitem>
    <asp:listitem>green</asp:listitem>
    </asp:dropdownlist>
    <br>
    font name

    <asp:dropdownlist runat=server id=ddlfontname>
    <asp:listitem>Miriam</asp:listitem>
    <asp:listitem>arial</asp:listitem>
    <asp:listitem>verdana</asp:listitem>
    </asp:dropdownlist>
    <br>
    Font color

    <asp:dropdownlist runat=server id=ddlfontcolor>
    <asp:listitem>Red</asp:listitem>
    <asp:listitem>Black</asp:listitem>
    <asp:listitem>White</asp:listitem>
    <asp:listitem>blue</asp:listitem>
    <asp:listitem>orange</asp:listitem>
    <asp:listitem>yellow</asp:listitem>
    <asp:listitem>gray</asp:listitem>
    <asp:listitem>pink</asp:listitem>
    <asp:listitem>green</asp:listitem>
    </asp:dropdownlist>
    <br>
    Font size

    <asp:dropdownlist runat=server id=ddlfontsize>
    <asp:listitem>6</asp:listitem>
    <asp:listitem>8</asp:listitem>
    <asp:listitem>10</asp:listitem>
    <asp:listitem>12</asp:listitem>
    <asp:listitem>14</asp:listitem>
    <asp:listitem>16</asp:listitem>
    <asp:listitem>18</asp:listitem>
    <asp:listitem>20</asp:listitem>
    <asp:listitem>26</asp:listitem>
    <asp:listitem>32</asp:listitem>
    <asp:listitem>40</asp:listitem>
    </asp:dropdownlist>
    <br>

    <P>
    <asp:button onclick=makeimage text=Create! runat=server />
</form>

כאן גם הוספתי את מרחבי בשמות בדרושים לנו

והינה התוצאה:

שימושים נוספים

ניתן לעשות עם שיטה זו שימוש מאד טוב נכתוב את קוד יצרית התמונה כעת בשיגרה page_load:

makeimage.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

יצרנו את אותו הקוד רק עם ערכים מוכנים מראש כעת ניצור דף בשם showMyPic.html

1
2

<b>Advertise</b><br>
<img src="makeimage.aspx">

והינה התוצאה:
showMyPic.html

תכנות נעים!

תגיות: ASP.Net, Image, תמונה

יצירת תמונה בזמן ריצה

שימושים נוספים

עוד בנושא זה

תגובות בפייסבוק

תגיות