DevTrain

Autor: Rene Paschold

Bilder dynamisch zur Laufzeit beschriften

Oft werden Bilder kopiert und finden sich auf ganz anderen Webseiten wieder ohne dass man erkennen kann woher das Bild eigentlich stammt. Ein kleiner Text innerhalb dieses Bildes würde vielen schon reichen da es doch nachträglich recht schwierig ist die Texte aus den Bildern zu entfernen.

Welche Möglichkeiten gibt es nun, um Bilder mit einem Text zu versehen? Entweder man verwendet ein Bildbearbeitungsprogramm oder man schreibt sich ein Programm welches dynamisch zur Laufzeit entsprechenden Text in das ausgewählte Bild rändert.

Die erste Methode ist mit Sicherheit die einfachste wenn man sich mit einem Bildbearbeitungsprogramm auskennt. Doch was ist wenn man mehrmals am Tag Bilder ins Web stellen möchte? Wie wäre es denn wenn das Bild vor dem Anzeigen noch manipuliert und der Text rein geschrieben wird?

Nichts leichter als das :-)

Man braucht zwei Dateien. Eine ASPX Seite auf der Das Bild ausgegeben wird und eine ASPX Seite auf der das Bild beschriftet wird.

default.aspx
image.aspx

default.aspx
Hier passiert eigentlich nichts Spektakuläres. In einem normalen ASPX Formular gibt es eine TextBox, einen Button und ein Image. Serverseitig sieht der Code wie folgt aus:

protected System.Web.UI.WebControls.TextBox txtText;
protected System.Web.UI.WebControls.Image imgDynText;
protected System.Web.UI.WebControls.Button btnGo;

private void Page_Load(object sender, System.EventArgs e)
{
  if (!Page.IsPostBack) this.DrawImage();
}

private void DrawImage()
{
  imgDynText
.ImageUrl = "image.aspx?imgText=" + txtText.Text;
}

private void btnGo_Click(object sender, System.EventArgs e)
{
 
this.DrawImage();
}

In der Methode DrawImage wird die Datei image.aspx mit einem Parameter dem Image zugewiesen. Interessant wird es erst in der Datei image.aspx!

image.aspx
Das wichtige zuerst: In der Datei darf kein HTML vorhanden sein. Die ASPX Seite muss leer sein:

Die Seite image.aspx wird später als jpg an den Client gesendet. Im folgenden der Code:

private void Page_Load(object sender, System.EventArgs e)
{
 
// Neues Bild erzeugen. Als Vorlage wird bild.jpg verwendet
 
Bitmap b = new Bitmap(Server.MapPath("bild.jpg"));

  // Erzeugt ein Graphic Object auf Basis der Bild Instanz
 
Graphics g = Graphics.FromImage(b);

  // Der übergebene Text wird in eine Variable gespeichert
 
string myText = Request.QueryString["imgText"];
 
string imgText = (myText.Length > 0) ? myText : "";

  // Texteigenschaften werden gesetzt
 
g.DrawString
   
(
   
myText,
   
new Font("Arial", 10, FontStyle.Bold),
   
new SolidBrush(Color.Black),
   
0,
   
b.Height - 25
   
);

  // Alle Grafikoptionen werden auf das Bild angewendet
 
g.Flush();

  // Der Ausgabetyp wird bestimmt und die Seite wird als "jpg" erkannt
 
Response.ContentType = "image/jpg";
 
b.Save(Response.OutputStream, ImageFormat.Gif);
}

Zuerst wird ein neues Bitmap Objekt erzeugt welches auf ein vorhandenes Bild verweist. Dann wird ein Graphic Objekt erzeugt welches auf das Bitmap Objekt verweist. Das ist notwendig damit das Graphic Objekt später weiss wohin der Text geschrieben werden muss.

Dann wird überprüft ob Text beim Aufruf des Bildes übergeben wurde. Wenn nicht verwenden wir einen leeren String.

Danach setzten wir die Text-Eigenschaften des Graphic Objektes über die Methode DrawString. Wenn das erledigt ist müssen diese Daten noch in das Bitmap gepackt werden. Das übernimmt die Methode Flush().

Und zum Schluss bestimmten wir den Ausgabetyp der ASPX Seite mit ContentType und speichern das Bild in den Ausgabestream.

Viel Spaß beim testen!


Erfasst am: 01.12.2003 - Artikel-URL: http://www.devtrain.de/news.aspx?artnr=899
© Copyright 2003 ppedv AG - http://www.ppedv.de