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

‏ • 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=backgroundcolor: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=backgroundcolor: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  








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


<script runat=”server” language=”vb”>
Sub page_load(sender As Object, e As EventArgs)
    Dim aText As String
    atext = “Visit My Site” & vbcrlf & “www.mysite.co.il”            
    Dim aWidth As Integer = “200”
    Dim aHeight As Integer = “100”
    Dim aBgColor As Drawing.Color = Drawing.ColorTranslator.FromHtml(“#DCDACB”)
    Dim aFont As New Drawing.Font(“verdana”, 18,Drawing.FontStyle.bold, Drawing.GraphicsUnit.Pixel)
    Dim aFontColor As Drawing.Color = Drawing.ColorTranslator.FromHtml(“#000000”)
    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>


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










1
2  








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


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


תכנות נעים!

תגיות: , ,

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