Programmeren in ASP.NET/Server-side afbeeldingen

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

Programmeren in ASP.NET

  1. Wat is ASP.NET?
  2. Wat heb ik nodig voor ASP.NET?
  3. Een ASP.NET-server installeren
  4. Je eerste ASP.NET-pagina
  5. HTML-controls
  6. Foutzoeken
  7. Web-server-controls
  8. Webformulieren
  9. Veelgebruikte objecten
  10. Validering
  11. Master-pagina's
  12. Navigatie
  13. Gegevenstoegang
  14. Werken met databanken
  15. Databankgegevens wijzigen
  16. Werken met datacontrols
  17. GridView
  18. FormView en DetailsView
  19. User-controls
  20. Custom controls
  21. AJAX
  22. Viewstate
  23. Configuratiebestanden
  24. Webservices
  25. Beveiliging
  26. Personalisatie en profielen
  27. Thema's en skins
  28. WebParts
  29. Globalisering
  30. Caching
  31. Mail vanuit ASP.NET
  32. Reguliere expressies
  33. Server-side afbeeldingen
  34. Mobiele toepassingen
  35. Meer informatie
  36. Appendix: foutmeldingen

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]

  1. Breid dit script uit met een keuzemogelijkheid voor cursief of niet.
  2. Breid dit script uit met een keuzemogelijkheid voor vet of niet.
  3. Breid dit script uit met een keuzemogelijkheid voor de lettergrootte.
Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.