Android Question Print HTML file in WebView with images

Penfound · Dec 1, 2015

Hi all

I have an app that I'm writing to print Lesson Plans for me. Everything is working beautifully (thanks Erel) except....

My Lesson Plan is displayed on my device and includes a .jpg logo and this is shown correctly. In order to print the LP I have to email the file to myself which works well but the image is missing. Below is the code I use to generate the header of the LP. What am I missing please?

B4X:

 sbHeader.Append("<html><body>").Append(CRLF)
 sbHeader.Append("<style type='text/css'>").Append(HtmlCSS).Append("</style>").Append(CRLF)
 sbHeader.Append("<table width='" & pnlWidth & "'><tr >").Append(CRLF)
 sbHeader.Append("<td style='font-size:20';>Session Plan Open Computing")
 sbHeader.Append( "</td><td style='font-size:20;text-align:right';white-space:nowrap;>")
 sbHeader.Append("<img src='File:///android_asset/ldlogo.jpg" & "' border=0/></td></tr>") 
 sbHeader.Append( "<tr><td style='font-size:20;text-align:left';><b>Course:</b> ")
 sbHeader.Append(tmpCourse)
 sbHeader.Append( "</td><td style='font-size:20;text-align:right';white-space: nowrap;><b>Date:</b> ")
 DateTime.DateFormat ="dd MMM yyyy"
 Dim ThisTime As String
 ThisTime = DateTime.Date(DateTime.Now)
 sbHeader.Append(ThisTime)
 sbHeader.Append("</td></tr>")
 sbHeader.Append( "<tr><td style='font-size:20;text-align:left';><b>Venue:</b> ")
 sbHeader.Append(tmpVenue)
 sbHeader.Append( "</td><td style='font-size:20;text-align:right';white-space: nowrap;><b>Time:</b>")
 sbHeader.Append(tmpTime)
 sbHeader.Append( "</td></tr><tr><td colspan='2' style='font-size:20;text-align:left';>" )
 sbHeader.Append( tmpReseources)
 sbHeader.Append( "</td><td></td></tr><tr><td colspan='2'style='font-size:20;text-align:left';>" )
 sbHeader.Append( tmpLiteracy)
 sbHeader.Append( "</td><td></td></tr>" )
 sbHeader.Append("</table>").Append(CRLF)
 sbHeader.Append(sb).Append(CRLF)
 sbHeader.Append("</table></body></html>")
 File.writestring(File.DirRootExternal,"SessionPlan.html",sbHeader.ToString)
 Return sbHeader.ToString

Many thanks for loking
Penfound

eurojam · Dec 1, 2015

the problem is, that the image is linked in your HTML (File:///android_asset/ldlogo.jpg), so if you mail the HTML, there will no image be present. One solution is to embedd the image encoded as Base64.

Penfound · Dec 1, 2015

Thanks eurojam I did try looking for how to do this but found no examples - have you by any chance done it

Penfound

eurojam · Dec 1, 2015

you can embedd an image like this:

B4X:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAWgBaAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAAB..." />

you can use an onlne converter to convert your image to base64: https://www.base64-image.de/

eurojam · Dec 1, 2015

or you can use stringutils and do it by yourself:

B4X:

Sub ImageEncodeBase64(Dir As String, Image As String) As String
    Dim su As StringUtils
    Dim in As InputStream
    in = File.OpenInput(Dir, Image)
    Dim out As OutputStream
    out.InitializeToBytesArray(1000)
    File.Copy2(in, out) '<---- This does the actual copying
    Dim data() As Byte
    data = out.ToBytesArray
    Return su.EncodeBase64(data)
End Sub

the above function I use in B4J, but B4A must be similar...

Penfound · Dec 1, 2015

Almost there but not yet working, no image display in html doc after emailing

B4X:

sbHeader.Append( "</td><td style='font-size:20;text-align:right';white-space:nowrap;>")
sbHeader.Append("<img src='data:image/jpeg;base64,data:image/jpeg;base64,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' />" )
sbHeader.Append( "<tr><td style='font-size:20;text-align:left';><b>Course:</b> ")

eurojam · Dec 1, 2015

you still have an error in your html:

B4X:

sbHeader.Append("<img src='data:image/jpeg;base64,data:image/jpeg;base64,/9j....

it should be

B4X:

sbHeader.Append("<img src='data:image/jpeg;base64,/9j....

Can you see the difference?

Erel · Dec 2, 2015

Tip: use the relatively new smart strings literal: https://www.b4x.com/android/forum/threads/50135/#content

Penfound · Dec 3, 2015

eurojam - thank you so much it is sorted now.

Erel: Thank for your string literals as well - something else to get my head round

Android Question Print HTML file in WebView with images

Penfound

Active Member

eurojam

Well-Known Member

Penfound

Active Member

eurojam

Well-Known Member

eurojam

Well-Known Member

Penfound

Active Member

eurojam

Well-Known Member

Erel

B4X founder

Penfound

Active Member

Similar Threads