[VB2010] Image to Text-Image using GDI

[akhileshbc]

Hi guys

This is a simple project created to find out how cool this could be.

I was browsing through certain websites and I got stuck on an image where the image is made up of characters. So, I thought about creating one like that, in VB.Net

My idea is the common method for composting (I believe so ). That is, a mask image used to hide all the unwanted places in the original image.

So, the first part is generating the mask image. Since I'm an "expert" in GDI , I have posted my question in here and ForumAccount came into action by providing a sample code. Thanks to him
Also, boops boops had given some tips too.
So that part is clear.

So, I have

• orgImage - original image
• maskImage - mask image (black and white) : white areas are what we nedded and black are unwanted areas

Now the next part is the main composting part. What I did actually was, first created a new bitmap with black background, called compImage.

Then looped through the pixels of maskImage and checked whether the color of the current pixel is white and not transparent (in case of transparent PNG images). If the condition is matched, I would copy the color of the origImage's current pixel color to the compImage's current pixel.

And finally this compImage is displayed to the user.

The code is as follows:

Imports System.Drawing.Imaging
 
Public Class Form1
 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
 
        Dim orgImage As Bitmap = PictureBox1.Image  '~~~ original image
 
        Dim maskImage As Bitmap = TextImageFiller.Fill("akhileshbc", PictureBox1.Size, Me.Font, Color.White, Color.Black)   '~~~ generating the mask by passing the text, size of image, fontcolor (should be white as we are using this for comparison) and backcolor (any color other than white)
 
        Dim compImage As New Bitmap(orgImage.Width, orgImage.Height)    '~~~ final image
 
 
        '~~~ prepare the final image's background (ie. create a black background)
        Using g As Graphics = Graphics.FromImage(compImage)
 
            g.FillRectangle(Brushes.Black, 0, 0, orgImage.Width, orgImage.Height)
 
        End Using
 
 
        '~~~ loop through the pixels, compare the colors of the mask image and put color based on the mask. 
        For i As Integer = 0 To maskImage.Width - 1
 
            For j As Integer = 0 To maskImage.Height - 1
 
                '~~~ if the mask image's current pixel's color is white and not transparent (in case of PNG images), then put that color in the final image's pixel position
                If maskImage.GetPixel(i, j) = Color.FromArgb(255, Color.White) AndAlso orgImage.GetPixel(i, j) <> Color.FromArgb(0, 0, 0, 0) Then
 
                    compImage.SetPixel(i, j, orgImage.GetPixel(i, j))   '~~~ put the original color
 
                ElseIf orgImage.GetPixel(i, j) = Color.FromArgb(0, 0, 0, 0) Then '~~~ check if it is transparent color
 
                    compImage.SetPixel(i, j, Color.FromArgb(0, 0, 0, 0))   '~~~ put the transparent color
 
                End If
 
            Next
 
        Next
 
 
        '~~~ display the output
        Me.PictureBox2.Image = compImage
 
    End Sub
 
End Class
 
'~~~ the following code is provided by ForumAccount
'~~~ Thanks to him :)
Public Class TextImageFiller
 
    '//methods
    Public Shared Function Fill(ByVal text As String, _
                                ByVal imageSize As Size, ByVal font As Font) As Bitmap
 
        Return TextImageFiller.Fill(text, imageSize, font, Color.Black)
    End Function
 
    Public Shared Function Fill(ByVal text As String, ByVal imageSize As Size, _
                                ByVal font As Font, ByVal fontColor As Color) As Bitmap
 
        Return TextImageFiller.Fill(text, imageSize, font, fontColor, Color.White)
    End Function
 
    Public Shared Function Fill(ByVal text As String, ByVal imageSize As Size, _
                                ByVal font As Font, ByVal fontColor As Color, _
                                ByVal backColor As Color) As Bitmap
 
        Dim bmp = New Bitmap(imageSize.Width, imageSize.Height)
 
        Using g = Graphics.FromImage(bmp)
 
            Dim flags = TextFormatFlags.NoPadding
            Dim sz = TextRenderer.MeasureText(g, text, font, Size.empty, flags)
 
            For x = 0 To bmp.Width - 1 Step sz.Width
                For y = 0 To bmp.Height - 1 Step sz.Height
                    TextRenderer.DrawText(g, text, font, New Point(x, y), _
                                          fontColor, backColor, flags)
                Next
            Next
 
        End Using
 
        Return bmp
    End Function
 
End Class

I have attached two images and the source code. Comments/suggestions/appreciation/gifts are always welcome

I hope you would give your ideas in making it better.

Thanks

[anu neeralgi]

hi, its cool.
I need ur help in solving some what similar problem
I want to create a editor where in i can type any language(Text message) and it should be converted to image as it is. then send it as sms.
could u give me any idea regarding this.

thank you

[akhileshbc]

hi, its cool.
I need ur help in solving some what similar problem
I want to create a editor where in i can type any language(Text message) and it should be converted to image as it is. then send it as sms.
could u give me any idea regarding this.

thank you

Hi.. welcome to the forums

For the editor you could use a RichTextBox control.
And regarding conversion of text to image and sending it as SMS: you are trying to send it as MMS ?

[akhileshbc]

Is this what you are looking for ? : http://www.codeproject.com/KB/web-im...t_with_c_.aspx

[anu neeralgi]

Hi.. welcome to the forums

For the editor you could use a RichTextBox control.
And regarding conversion of text to image and sending it as SMS: you are trying to send it as MMS ?

Thank u akhilesh,
actually i dont want to send it as MMS, i want to send it as picture message.
I am working in agriculture university, my need is to send the agriculture based information to the farmers in the regional language. the available text message services are in english, that a normal farmer cannot under stand. thats why i am thinking of developing an application to type the message in regional language(Kannada) and send the message in the picture format. Picture format because , all the handsets are not compatible for regional languages.

bye
I think you can suggest me out some idea.

[akhileshbc]

Check these:

• http://www.codeproject.com/KB/graphi...converter.aspx
• http://www.codeproject.com/KB/smart/...e_Message.aspx

Both are in C#. But it wouldn't be much hard to convert to VB.Net using some online converters.

Online converters:

• from DeveloperFusion
• from Telerik

[anu neeralgi]

Check these:

• http://www.codeproject.com/KB/graphi...converter.aspx
• http://www.codeproject.com/KB/smart/...e_Message.aspx

Both are in C#. But it wouldn't be much hard to convert to VB.Net using some online converters.

Online converters:

• from DeveloperFusion
• from Telerik

thank u
i will try and let u know the results
if it serves my purpose i will be grateful to u
if doesnt serve the purpose i will be disturbing u again

[akhileshbc]

thank u
i will try and let u know the results
if it serves my purpose i will be grateful to u
if doesnt serve the purpose i will be disturbing u again

No problem

[Ram2Curious]

Good

An illusion effect coupled with creative animation would make it to appear interesting.

[akhileshbc]

Good

An illusion effect coupled with creative animation would make it to appear interesting.

Thanks

Will try to do that

[nkkin]

that is cool
Is there someone who can modify to draw random text all over the picture
i tried to do this but it does not work
i tried the random function and it gives me a random sentence and this sentence
is repeated all over the picture
i want a random letters all over the picture
and if possible not aligned i want those letters Scattered on the picture



thanks

[boops boops]

edit: oops, I accidentally sent the message before writing it. I may get round to sending something soon! BB

[akhileshbc]

edit: oops, I accidentally sent the message before writing it. I may get round to sending something soon! BB

Hey BB,
If you have some additions, you could post it here or you could create a separate thread and post the link to it in here. No problem with that.

[Arve K.]

Cool, but your image looked better

[akhileshbc]

Cool, but your image looked better

Maybe it's because of the font. My system has:

• Windows XP Pro SP3
• VB 2010

[Arve K.]

Tried the code in Win 7 and XP, both with VB 2010, but with the same result..

[boops boops]

Hey BB,
If you have some additions, you could post it here or you could create a separate thread and post the link to it in here. No problem with that.

I don't have time now to work out the details, but I'll sum up some improvements I think will be worth trying.

1. Instead of making the mask image in a loop with TextRenderer.DrawString, make a single image of the text and paint it with a System.Drawing.TextureBrush set to FillMode.Tile. I think this will be somewhat faster and therefore better for animations involving moving or changing the text. (I would have suggested it in your original VB.Net thread if I'd known this is what you wanted to do).

2. Draw the text without anti-aliasing, because the result will be clearer.

3. Use a Lockbits-method to superimpose the mask image instead of Bitmap.GetPixel/SetPixel. My FastPix class (see first item in my sig) provides a convenient way of doing that -- I use it myself all the time. It will be hugely faster and may make some interesting animations possible.

4. Instead of superimposing the text in black or white, invert the color of the source image pixels. It only takes a single logic instruction in a Lockbits/FastPix loop, so it can be over 100x faster than GetPixel/SetPixel. This works well for images with plenty of color or contrast such as your vicious smiley.

5. No. 4 fails for images with large areas of middle gray or of gradients around middle gray. The inverse of gray is gray, so you can't see anything. Unfortunately, I don't think there's a single method that works well for every image you can find, however complicated you make it. For images like these, I suggest using black for average rgb values > 127 and white for <127.

6. As a complete alternative, use Graphics.DrawString or GraphicsPath.AddString+Graphics.DrawPath to draw directly on the source image. Then you could take advantage of antialiasing to get a smoother result. First, you would have to analyse the colors of the source image to create two or more Clip objects, and use those to control which colour is drawn on different parts of the image. I suspect this approach will be slower, though.

I have started writing a prog based on 1-5 above, but I have to find time to complete it.

BB

[nkkin]

Another problem is that the text image loooks bad when we use a big font size
we get a very huge space between letters that makes the picture look bad
as in the picture above for powerade
we need to reduce letters spacing