# 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.
| 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.
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.
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).
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
Dit is het ganse script:
text1.aspx
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
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

* 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.