Merge an image, a background and Text into a single image

Question

I found this code here:

Private _BackgroundColours As New List(Of String)() From { _
    "339966", _
    "3366CC", _
    "CC33FF", _
    "FF5050" _
}

Public Function GenerateRactangle(firstName As String, lastName As String) As MemoryStream
    Dim imgSize() As Integer = {800, 800}
    Dim avatarString As String = String.Format("{0}{1}", firstName(0), lastName(0)).ToUpper()
    Dim bgColour = _BackgroundColours(New Random().[Next](0, _BackgroundColours.Count - 1))
    Dim bmp As Bitmap = New Bitmap(imgSize(0), imgSize(1))
    Dim sf As StringFormat = New StringFormat()
    Dim ms As MemoryStream = New MemoryStream()
    Dim font As Font = New Font("Arial", 172, FontStyle.Bold, GraphicsUnit.Pixel)
    Dim graphics__1 As Graphics = Nothing

    sf.Alignment = StringAlignment.Center
    sf.LineAlignment = StringAlignment.Center

    graphics__1 = Graphics.FromImage(bmp)
    graphics__1.Clear(DirectCast(New ColorConverter().ConvertFromString("#" + bgColour), Color))
    graphics__1.SmoothingMode = SmoothingMode.AntiAlias
    graphics__1.TextRenderingHint = TextRenderingHint.AntiAliasGridFit
    graphics__1.DrawString(avatarString, font, New SolidBrush(Color.WhiteSmoke), New RectangleF(0, 0, imgSize(0), imgSize(1)), sf)
    graphics__1.Flush()
    bmp.Save(ms, ImageFormat.Png)

    Return ms
End Function

On stackoverflow and it works great. However, I am in need of using a transparent PNG image in the background with the color changing background color.

What it currently looks like:

What I am looking for it to look like:

With the PNG image being this that was added:

I am hoping someone with more knowledge about the graphics calls can let me know how to go about doing this.

Use [`Graphics.DrawImage()`](https://msdn.microsoft.com/en-us/library/system.drawing.graphics.drawimage(v=vs.110).aspx). — Visual Vincent, Apr 05 '16 at 16:39
When you draw the silhouette to image one, it is going to cover the letters. For the desired result, you need the first image as 2: one for the BG and once for the letters - you cant insert the silhouette "between" the 2 layers. If the one part is always letters, you could just draw them. — Ňɏssa Pøngjǣrdenlarp, Apr 05 '16 at 16:46
@Plutonix Would i not be able to insert the avatar image and then do a background color on the transparent part of that PNG? Then I can add the text on top of all that? — StealthRT, Apr 05 '16 at 16:48
Yes, that is what I was saying - you cant start with the first image as an image because they are more like layers — Ňɏssa Pøngjǣrdenlarp, Apr 05 '16 at 16:49
You should simply post a new question. There is nothing in the original relating to rounded corners. As for the result, what is the value of `d`? Do you want it basically a circle inside or a rounded insert (corners clipped) — Ňɏssa Pøngjǣrdenlarp, Apr 05 '16 at 19:09
@Plutonix No i just wanted the corners curved a little instead of it being all square. — StealthRT, Apr 05 '16 at 19:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108322/discussion-between-stealthrt-and-plutonix). — StealthRT, Apr 05 '16 at 19:24

Ňɏssa Pøngjǣrdenlarp · Accepted Answer · 2016-04-05T17:31:21.897

The method you found leaves at least the Font and Grahics objects undisposed, so if that is used as a factory to process numerous images, it will leak. Things like picking a random back color might be better left to the calling code, and a memstream seems an odd return type choice.

A general method to create a background, overlay a PNG and apply the text to it:

Private Function CreateLabeledAvatar(av As Image, bg As Color, text As String) As Image

    ' fixed size?
    Dim bmp As New Bitmap(250, 250)
    Using g As Graphics = Graphics.FromImage(bmp)
        Using br As New SolidBrush(bg)
            g.FillRectangle(br, 0, 0, bmp.Width, bmp.Height)
        End Using
        g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
        g.CompositingQuality = CompositingQuality.HighQuality
        g.TextRenderingHint = TextRenderingHint.AntiAlias
        g.SmoothingMode = SmoothingMode.HighQuality
        g.DrawImage(av, 0, 0, bmp.Width, bmp.Height)

        ' lastly the text, centred on the new image
        ' could also draw to the AV passed to center on IT
        Using fnt As New Font("Arial", 32, FontStyle.Bold, GraphicsUnit.Pixel)
            TextRenderer.DrawText(g, text, fnt, New Rectangle(0, 0, 250, 250), 
                  Color.WhiteSmoke,
                  TextFormatFlags.HorizontalCenter Or TextFormatFlags.VerticalCenter)
        End Using

    End Using

    Return bmp
End Function

Sample usage:

Dim av = Image.FromFile("C:\temp\maleAV.png")
Dim bg = Color.FromArgb(62, 103, 207)

Dim newImg = CreateLabeledAvatar(av, bg, "BB")
pb1.Image = newImg

av.Dispose()

When your code is done with it, newImg should also be disposed.

There are other params you might want to be passed or set such as the desired size, font size and maybe even the text color. Passing any more, though and I would make it a class, so if it is used to processed a lot of them, many params could be set once.

Result:

The image created was 250,250, it is displayed in a 150x150 PBox

Thanks for the example! Would I also use **System.Drawing.Drawing2D.GraphicsPath** to give the rectangle curved corners? — StealthRT, Apr 05 '16 at 17:31
Rounded as in the blueish part? What would be behind it, transparent? — Ňɏssa Pøngjǣrdenlarp, Apr 05 '16 at 17:33
@StealthRT Yes, instead of using `FillRectangle` you would create a `GraphicsPath` with 4 lines and 4 arcs, then use `FillPath` on that path. — Bradley Uffner, Apr 05 '16 at 17:53
Yes, I know GP works...it can actually be more complicated than that for it to look good. The arcs can look terrible because of the length of them compared to the amount of arc, unless you jump thru a hoop or two. — Ňɏssa Pøngjǣrdenlarp, Apr 05 '16 at 17:57
Good work both @Plutonix and also bradleyuffner. Both worked well. — StealthRT, Apr 05 '16 at 18:44

Merge an image, a background and Text into a single image

1 Answers1

Linked