Android Question Text on Image

Smee

Well-Known Member
Licensed User
Longtime User
I am trying to work out how to put text on an Image. I have searched and read many threads and I think I understand the principle. I found this thread explaining the process, https://www.b4x.com/android/forum/threads/superimpose-text-on-image.27621/#post-160180
However I cannot find out how to carry out this "Canvas.DrawImage" I assume it has been deprecated.
Can someone point me in the right direction to do this task or better yet a code snippet.

Many thanks
 

Star-Dust

Expert
Licensed User
Longtime User
try this
B4X:
Sub FuseTexiImage(Bm As Bitmap, Text As String, TextColor As Int) As Bitmap
    Dim Bmp As Bitmap
    Dim Can As Canvas
    Dim Rec As Rect
   
   
    Bmp.InitializeMutable(Bm.Width,Bm.Height)
    Can.Initialize2(Bmp)
    Rec.Initialize(0m0mbm.width,Bm.Height)
    Can.DrawBitmap(Bm,Null,Rec)
    Can.DrawText(Text,Bm.Width/2,Bm.Height-20dip,Typeface.DEFAULT,14,TextColor,"CENTER")
   
    Return Can.Bitmap
End Sub
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Thanks very much for that @Star-Dust , however it is not working as I expect. I think I am still not understanding the process properly
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Thanks very much for that @Star-Dust , however it is not working as I expect. I think I am still not understanding the process properly
What do you want to get accurate?
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Did you have a look at chapter 16 Graphics / Drawing in the B4A Beginner's Guide?
Hi @klaus @Star-Dust , Thanks for the replies.
Yes I have re-read that chapter but i am obviously missing something basic. What I am trying to do is take an Image, draw some text onto it and then save it for use later. Using Star-Dust's code I modified it slightly. The test.png is created but it remains the same as image2.png. So I am unsure as to what I am doing wrong or misunderstanding.

B4X:
    BmpName.Initialize(File.DirAssets,"image2.png")
    FuseTexiImage(BmpName,"Test Message",Colors.Black)

Sub FuseTexiImage(Bm As Bitmap, Text As String, TextColor As Int) As Bitmap
    Dim Bmp As Bitmap
    Dim Rec As Rect
  
    Bmp.InitializeMutable(Bm.Width,Bm.Height)
    Can.Initialize2(Bmp)
    Rec.Initialize(0,0,Bm.Width,Bm.Height)
    Can.DrawBitmap(Bm,Null,Rec)
    Can.DrawText(Text,Bm.Width/2,Bm.Height-60dip,Typeface.DEFAULT,28,TextColor,"CENTER")
    Dim OUT As OutputStream
    OUT = File.OpenOutput(File.DirRootExternal,"test.png", False)
    Can.Bitmap.WriteToStream( OUT,100,"PNG")
    OUT.Close
   
End Sub
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Everything depends on how great the image is. Testopus have set it too large and get out of the picture.
Or put it out of the picture.
Bm.Height-60dip assumes that the image is bigger than 60dip

To start trying to see the effect of writing over the image.

B4X:
BmpName.Initialize(File.DirAssets,"image2.png")
    SaveImage(FuseTexiImage(BmpName,"Test Message",Colors.Black))

Sub FuseTexiImage(Bm As Bitmap, Text As String, TextColor As Int) As Bitmap
    Dim Bmp As Bitmap
    Dim Rec As Rect

    Bmp.InitializeMutable(Bm.Width,Bm.Height)
    Can.Initialize2(Bmp)
    Rec.Initialize(0,0,Bm.Width,Bm.Height)
    Can.DrawBitmap(Bm,Null,Rec)
    Can.DrawText(Text,0,0,Typeface.DEFAULT,12,TextColor,"CENTER")
   Return Can.Bitmap
End Sub

Sub SaveImage(Bmp as Bitmap)
Dim OUT As OutputStream
OUT = File.OpenOutput(File.DirRootExternal,"test.png", False)
Bmp.WriteToStream(OUT,100,"PNG")
OUT.Close
End Sub

If you see text appearing on the image, you can change the text coordinates later and place them where you think it best
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Hi Guys,

Thanks again for the help. I copied the code as is but still nothing. The image is the same coming out as it is going in (attached). Not sure what to try next. It is straighforward code and the black text should be seen on that background.

UPDATE: I massively increased the size of the text and I can see a bit of text, so I will play around with the positioning and see how it goes
 

Attachments

  • image2.png
    1.4 KB · Views: 206
Last edited:
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Many Thanks for your help guys, I was getting a little despondent there. The test is working ok now.
Thanks again
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Post your project as a zip file so we can see what you have done and how.
What is the size of the bitmap?
Sorry Klaus I did not see your last post, however I set the text positions to 30,170 and all is well. As I said once I massively increased the text I saw a portion of it so it was just a matter of adjusting. The code is the same as @Star-Dust posted in the last post. I am not sure if using a different sub for saving the file made any difference but it works.
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
It makes no difference. But it's cleaner writing. And you can re-use the Sub to save it to other content and other programs, the same for the sub that combines the text with the image.

Or change name to sub in FuseTexiImageAndSave
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
I still write because I miss only 50 messages to get to a thousand. So I waste them.
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…