Write text on top of existing image file?

Question

So I was doing this in WinForms .NET 3.5... I am now using WPF .NET 4.0... and I cant figure out how to do it.

This is what I was doing in Windows .NET 3.5

using (Bitmap eventImg = new Bitmap("input.png"))
{
    Graphics eventGfx = Graphics.FromImage(eventImg);

    buildText(eventGfx, this.event1.Text);

    eventImg.Save("output.png", ImageFormat.Png);
    eventGfx.Dispose();
}

The above code took the existing image at "input.png", created a new image from it, wrote text from it and then saved the new image at "output.png". Text was written using the following function:

private void buildText(Graphics graphic, string text)
{
    if (text.Length == 0) { return; }

    FontStyle weight = FontStyle.Regular;

    switch (this.font_style)
    {
        case "regular":     weight = FontStyle.Regular;     break;
        case "bold":        weight = FontStyle.Bold;        break;
        case "italic":      weight = FontStyle.Italic;      break;
        case "underline":   weight = FontStyle.Underline;   break;
        case "strikeout":   weight = FontStyle.Strikeout;   break;
    }

    using (Font font = new Font(this.font_family, this.font_size, weight, GraphicsUnit.Pixel))
    {
        Rectangle rect = new Rectangle(this.left, this.top, this.width, this.height);
        Brush brush = new SolidBrush(Color.FromArgb(this.font_color));

        StringFormat format = new StringFormat();

        switch (this.align_x)
        {
            case "left":    format.Alignment = StringAlignment.Near;     break;
            case "right":   format.Alignment = StringAlignment.Far;      break;
            default:        format.Alignment = StringAlignment.Center;   break;
        }

        switch (this.align_y)
        {
            case "top":     format.LineAlignment = StringAlignment.Near;    break;
            case "bottom":  format.LineAlignment = StringAlignment.Far;     break;
            default:        format.LineAlignment = StringAlignment.Center;  break;
        }

        graphic.TextRenderingHint = TextRenderingHint.AntiAlias;
        graphic.DrawString(text, font, brush, rect, format);
    }
}

However, since System.Drawing does not exist in WPF .NET 4.0, I can't use these functions anymore. How would I do what I am trying to do in WPF .NET 4.0? I've gotten as far as the code below in order to do the first step of making an image based on the old image:

using (var fileStream = new FileStream(@"z:\ouput.png", FileMode.Create))
{
    BitmapEncoder encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(new Uri(@"z:\input.png")));
    encoder.Save(fileStream);
}

Answer 1

Having read answers and comments here I thought you might appreciate a more comprehensive solution. Here is a little method that does the job:

public static void WriteTextToImage(string inputFile, string outputFile, FormattedText text, Point position)
{
    BitmapImage bitmap = new BitmapImage(new Uri(inputFile)); // inputFile must be absolute path
    DrawingVisual visual = new DrawingVisual();

    using (DrawingContext dc = visual.RenderOpen())
    {
        dc.DrawImage(bitmap, new Rect(0, 0, bitmap.PixelWidth, bitmap.PixelHeight));
        dc.DrawText(text, position);
    }

    RenderTargetBitmap target = new RenderTargetBitmap(bitmap.PixelWidth, bitmap.PixelHeight,
                                                       bitmap.DpiX, bitmap.DpiY, PixelFormats.Default);
    target.Render(visual);

    BitmapEncoder encoder = null;

    switch (Path.GetExtension(outputFile))
    {
        case ".png":
            encoder = new PngBitmapEncoder();
            break;
        // more encoders here
    }

    if (encoder != null)
    {
        encoder.Frames.Add(BitmapFrame.Create(target));
        using (FileStream outputStream = new FileStream(outputFile, FileMode.Create))
        {
            encoder.Save(outputStream);
        }
    }
}

You would use this method with a FormattedText object and a position:

FormattedText text = new FormattedText(
    "Hello",
    CultureInfo.InvariantCulture,
    FlowDirection.LeftToRight,
    new Typeface("Segeo UI"),
    20,
    Brushes.Red);

WriteTextToImage(
    @"C:\Users\Public\Pictures\Sample Pictures\Desert.jpg",
    "Desert.png",
    text,
    new Point(10, 10));

EDIT: If you want to draw the text horizontally and vertically aligned relative to a certain rectangle, you might replace the position parameter by that rectangle and two alignment parameters and calculate the text position like this:

public static void WriteTextToImage(string inputFile, string outputFile, FormattedText text,
    Rect textRect, HorizontalAlignment hAlign, VerticalAlignment vAlign)
{
    BitmapImage bitmap = new BitmapImage(new Uri(inputFile));
    DrawingVisual visual = new DrawingVisual();
    Point position = textRect.Location;

    switch (hAlign)
    {
        case HorizontalAlignment.Center:
            position.X += (textRect.Width - text.Width) / 2;
            break;
        case HorizontalAlignment.Right:
            position.X += textRect.Width - text.Width;
            break;
    }

    switch (vAlign)
    {
        case VerticalAlignment.Center:
            position.Y += (textRect.Height - text.Height) / 2;
            break;
        case VerticalAlignment.Bottom:
            position.Y += textRect.Height - text.Height;
            break;
    }

    using (DrawingContext dc = visual.RenderOpen())
    {
        dc.DrawImage(bitmap, new Rect(0, 0, bitmap.PixelWidth, bitmap.PixelHeight));
        dc.DrawText(text, position);
    }

    RenderTargetBitmap target = new RenderTargetBitmap(bitmap.PixelWidth, bitmap.PixelHeight,
                                                       bitmap.DpiX, bitmap.DpiY, PixelFormats.Default);
    target.Render(visual);

    BitmapEncoder encoder = null;

    switch (Path.GetExtension(outputFile))
    {
        case ".png":
            encoder = new PngBitmapEncoder();
            break;
        case ".jpg":
            encoder = new JpegBitmapEncoder();
            break;
    }

    if (encoder != null)
    {
        encoder.Frames.Add(BitmapFrame.Create(target));

        using (FileStream outputStream = new FileStream(outputFile, FileMode.Create))
        {
            encoder.Save(outputStream);
        }
    }
}

Now you might use the method like this:

WriteTextToImage(@"C:\Users\Public\Pictures\Sample Pictures\Desert.jpg", "Desert.png", text,
    new Rect(80, 50, 430, 200),
    HorizontalAlignment.Center, VerticalAlignment.Center);

Answer 2

you can use grid or any other panel which suits your needs in the following way

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions>

    <Image x:name="My image" .. bind it to the bintmap 
           Grid.row="0"
           Grid.colomn="0"/>
    <TextBlock x:name="MyText"  
               Text="....."
                Grid.row="0"
                Grid.colomn="0"/>
</Grid>

the text and the image are drawn in the same space in the grid and you can manipulate the alignment anyway you like

Answer 3

In WPF you are not allowed to use Graphics because wpf offers new tec. to do that. Graphics referes to old Windows API's but WPF uses DirectX. As example WPF does not work anymore with pixels and so on.

http://msdn.microsoft.com/de-de/library/system.windows.media.drawingcontext.aspx