Programmeren in ASP.NET/Server-side afbeeldingen
In dit hoofdstuk krijg je een voorbeeld hoe je met behulp van het .NET Framework afbeeldingen op een site dynamisch kan aanmaken.
Had je in klassiek ASP nog third-party componenten nodig voor het bewerken of maken van afbeeldingen (en als het een beetje tegen zat meerdere componenten), tegenwoordig heb je in ASP.NET genoeg aan de standaard voorzieningen. Afbeeldingen genereren, bewerken en veranderen van formaat, het kan allemaal.
Let op: als je echt ingewikkelde bewerkingen wil doen en je site heeft veel succes, dan kan je server snel overbelast geraken. Tekenen is een intensieve operatie, en dat is niet echt een toepassing waar de code het best op een server gedraaid wordt (omdat er zoveel gebruikers tegelijk kunnen zijn). Maar voor simpele tekeningen of voor weinig belaste sites of intranetten biedt het zeker interessante mogelijkheden.
We gaan nu een pagina aanmaken met de naam text1.aspx, waarin de afbeelding gemaakt wordt. Het bestand bevat geen enkele HTML-code, alleen de afbeelding wordt gemaakt.
De afbeelding zal bestaan uit een tekst met een schaduw. De tekst en het lettertype kan de gebruiker kiezen, en deze waarden worden doorgegeven aan het script in text1.aspx met behulp van de url.
Je begint met het importeren van de benodigde naamruimtes.
<%@ import Namespace="System.Drawing" %> <%@ import Namespace="System.Drawing.Imaging" %> <%@ import Namespace="System.Drawing.Drawing2D" %>
| System.Drawing | Algemene naamruimte voor het kunnen werken met afbeeldingen. |
| System.Drawing.Drawing2D | Voor het verbeteren van de kwaliteit van de gegenereerde afbeelding. |
| System.Drawing.Imaging | Voor o.a. het Bitmap en het Graphics-object. |
Voor het aanmaken van de afbeelding kan je de Page_Init-eventhandler gebruiken, deze wordt altijd gestart als de pagina opgevraagd wordt.
Response.ContentType gebruik je om de browser van de client te vertellen dat de data die nu gaat komen geen text/html (zoals gebruikelijk met aspx pagina’s), maar dat het binaire data van het type image/gif is. Je kan ook image/jpg gebruiken, maar dit is eerder interessant voor het bewerken van foto's, niet voor tekeningen met effen vlakken.
Om een afbeelding te hebben, maak je een Bitmap-object aan. Het Graphics-object is het object dat nodig is om te kunnen tekenen op het Bitmap-object. Met Save sla je de bewerkte afbeelding op in het Graphics-object en is deze klaar om naar de client gestuurd te worden.
Ten slotte worden alle aangemaakte objecten vernietigd. Dit gebeurt met de Dispose() methode. Doe je dit niet, dan zal het origineel op de server vergrendeld zijn (en kun je het niet verwijderen/overschrijven). Dit komt doordat de webserver nog met dit bestand bezig zou zijn.
Response.ContentType = "image/gif"
Const width As Integer = 300, height = 300
Dim objBitmap As Bitmap= new Bitmap(width, height)
Dim objGraphics As Graphics = Graphics.FromImage(objBitmap)
... gebruik hier de verschillende methods van het Graphics-object
... om op objGraphics te tekenen.
objBitmap.Save(Response.OutputStream, ImageFormat.Gif)
objGraphics.Dispose()
objBitmap.Dispose()
Nu moet je het tekenen zelf nog invullen. We willen een stukje tekst tekenen. De eerste stap daarvoor is het aanmaken van de nodige Font- en Brush-objecten.
Dim WhiteBrush = New SolidBrush(Color.White)
Dim GrayBrush = New SolidBrush(Color.Gray)
Dim RedBrush = New SolidBrush(Color.Red)
Dim FontNaam As String = Request.QueryString("font")
Dim Tekst As String = Request.QueryString("text")
Dim objFont As Font = New Font(FontNaam, 50)
Wat belangrijk is tijdens het bewerken van afbeeldingen is de volgorde van tekenen. Op het moment dat je een tekst weg schrijft naar de afbeelding en vervolgens een wit vlak tekent, dan komt deze over de tekst heen en is die dus niet meer te lezen.
We gaan nu onze Fonts en Brushes en andere zaken op de originele foto loslaten. Eerst gebruik je FillRectangle om het gehele vlak wit te maken. Hiervoor geef je een Brush-object, een startcoördinaat x,y en een eindcoördinaat x,y (links boven en rechts onder).
objGraphics.FillRectangle(WhiteBrush, 0, 0, width, height) ' Achtergrond
Daarna teken je de tekst met behulp van de DrawString()-methode. Deze gebruikt hier 5 parameters:
- de tekst die moet geschreven worden
- de naam van het lettertype
- het Brush-object waarmee getekend wordt
- de x-coördinaat
- de y-coördinaat
objGraphics.DrawString(Tekst, objFont, GrayBrush, 5, 5) ' Teken schaduw
objGraphics.DrawString(Tekst, objFont, RedBrush, 0, 0) ' Teken hoofdafb.
Dit is het ganse script:
text1.aspx
<%@ Page Language="VB" %>
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">
Sub Page_Init( sender As Object, e As EventArgs)
' Zet de ContentType-property op de waarde voor een GIF
Response.ContentType = "image/gif"
Const width As Integer = 300, height = 300
' maak een Bitmap-instantie en een Graphics-instantie
Dim objBitmap As Bitmap= new Bitmap(width, height)
Dim objGraphics As Graphics = Graphics.FromImage(objBitmap)
Dim WhiteBrush = New SolidBrush(Color.White)
Dim GrayBrush = New SolidBrush(Color.Gray)
Dim RedBrush = New SolidBrush(Color.Red)
Dim FontNaam As String = Request.QueryString("font")
Dim Tekst As String = Request.QueryString("text")
Dim objFont As Font = New Font(FontNaam, 50)
objGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic
objGraphics.SmoothingMode = SmoothingMode.HighQuality
objGraphics.TextRenderingHint = TextRenderingHint.AntiAlias
objGraphics.FillRectangle(WhiteBrush, 0, 0, width, height) ' Achtergrond
objGraphics.DrawString(Tekst, objFont, GrayBrush, 5, 5) ' Teken schaduw
objGraphics.DrawString(Tekst, objFont, RedBrush, 0, 0) ' Teken hoofdafb.
' bewaar de afbeelding
objBitmap.Save(Response.OutputStream, ImageFormat.Gif)
' ruim op...
objGraphics.Dispose()
objBitmap.Dispose()
End Sub
</script>
Let op: het script hierboven produceert de losse afbeelding, zonder HTML-pagina. Je kan het resultaat zien door bijvoorbeeld text1.aspx?text=test&font=Arial op te vragen.
De volgende pagina bevat een formuliertje waar je een tekst en een lettertype kan kiezen, waarna de afbeelding opgevraagd wordt. Dit wordt gedaan door de ImageUrl-property van een Image-object in te stellen op text1.aspx met de juiste parameters.
drawing.aspx
<%@ Page Language="VB" %>
<script runat="server">
Sub Button1_Click(sender As Object, e As EventArgs)
Image1.ImageUrl="text1.aspx?text=" & TekstVak.Text & "&font=" & _
lbFonts.SelectedItem.Value
End Sub
</script>
<html>
<head>
<title>Tekenen</title>
</head>
<body>
<form runat="server">
<p>
Text:
<asp:TextBox id="TekstVak" runat="server"></asp:TextBox>
</p>
<p>
Font:
<asp:ListBox id="lbFonts" runat="server">
<asp:ListItem Value="Arial">Arial</asp:ListItem>
<asp:ListItem Value="Times New Roman">
Times New Roman</asp:ListItem>
<asp:ListItem Value="Courier New">Courier New</asp:ListItem>
<asp:ListItem Value="Tahoma">Tahoma</asp:ListItem>
<asp:ListItem Value="Comic Sans MS">Comic Sans MS</asp:ListItem>
</asp:ListBox>
</p>
<p>
<asp:Button id="Button1" onclick="Button1_Click" runat="server"
Text="Show"></asp:Button>
</p>
<p>
<asp:Image id="Image1" runat="server"></asp:Image>
</p>
</form>
</body>
</html>
Dit is maar één voorbeeld. De objecten Bitmap en Graphics hebben tientallen methodes waarmee allerlei toepassingen denkbaar zijn, zoals het tekenen van grafieken.
Opmerkingen:
- ASP.NET ondersteunt (nog) geen doorschijnende GIF's
- ASP.NET ondersteunt (nog) geen animated GIF's
Oefeningen bewerken
- Breid dit script uit met een keuzemogelijkheid voor cursief of niet.
- Breid dit script uit met een keuzemogelijkheid voor vet of niet.
- Breid dit script uit met een keuzemogelijkheid voor de lettergrootte.