Android Question Display Image From SD Card In WebView?

HimeAnator · Feb 6, 2014

I'm trying to load an image that is stored on the users SD card into a webview (created with designer). I get the webview to load but I cant seem to get the image to load. All I get is a blank white screen that I can zoom and scroll around.

The code I was able to come up with is below.

B4X:

ImagePath = ("file:///" & File.DirRootExternal & "/SavedImages/" & TempName & ".jpg")
TempHtml = "<img style=" & "Max-width: " & maxWidth & "; height: auto; src='" & ImagePath & "'/>"
WebView1.LoadHtml(TempHtml)

Anybody have any Ideas?

Thank you in advance for any help

Mahares · Feb 6, 2014

The below code works. The internal SD card is referred to as File.DirRootExternal:

B4X:

Sub Globals
    Dim TempName, ImagePath  As String
    Dim WebView1 As WebView
    Dim maxWidth As Int = 300
    Dim TempHtml As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("layout")  'has the webview1
    TempName="hime"   'name of file w/o extension
    ImagePath = (File.DirRootExternal & "/SavedImages/" & TempName & ".jpg")
    TempHtml = "<html><body><img style=" & "Max-width: " & maxWidth & "; height: auto; src=" & _
    ImagePath & "></body></html>"  'this works
    WebView1.LoadHtml(TempHtml)
End Sub

JoeR · Feb 6, 2014

Are you initializing your webview? If created with designer, you must not initialize it.

For simplicity of testing use:

B4X:

TempHtml = "hello world"

This proves whether or not your webview is working - avoids any uncertainties about images and paths.

I am not sure, but think you may only need two slashes after file:

HimeAnator · Feb 7, 2014

Mahares said:

The below code works. The internal SD card is referred to as File.DirRootExternal:

B4X:

Sub Globals
    Dim TempName, ImagePath  As String
    Dim WebView1 As WebView
    Dim maxWidth As Int = 300
    Dim TempHtml As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("layout")  'has the webview1
    TempName="hime"   'name of file w/o extension
    ImagePath = (File.DirRootExternal & "/SavedImages/" & TempName & ".jpg")
    TempHtml = "<html><body><img style=" & "Max-width: " & maxWidth & "; height: auto; src=" & _
    ImagePath & "></body></html>"  'this works
    WebView1.LoadHtml(TempHtml)
End Sub

Awesome it works! Thank you!!! I have one other question for you. I set maxWidth of the image to equal Activity.Width so that the image will fit in the webview and the height set to auto so it will keep it proportionate, but once the image loads its width is wider than the activity and webview window and I am unable to zoom out just in and scroll. Since the webview has a width set to the same as the activity(100%) shouldn't the image fit perfectly into the view?

Mahares · Feb 7, 2014

To get the photo to fit the webview, you can use the below code for TempHtml:

B4X:

TempHtml="<html><body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'><center>" _
& "<img src=" & ImagePath & " width='100%' height='100%'/></center>" _
& "</body></html>"

You can add this line to the code to fit the webview to the device screen:

B4X:

WebView1.Height=Activity.Height    :WebView1.Width=Activity.Width

Or you can add this to the Designer script:
WebView1.SetLeftAndRight(0,100%x)
WebView1.SetTopAndBottom(0,100%y)

You still can zoomin/out, but when you let go it returns to the original fit. Someone may offer a better way.

HimeAnator · Feb 7, 2014

Mahares said:
To get the photo to fit the webview, you can use the below code for TempHtml:

B4X:

TempHtml="<html><body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'><center>" _ & "<img src=" & ImagePath & " width='100%' height='100%'/></center>" _ & "</body></html>"

You can add this line to the code to fit the webview to the device screen:

B4X:

WebView1.Height=Activity.Height :WebView1.Width=Activity.Width

Or you can add this to the Designer script:
WebView1.SetLeftAndRight(0,100%x)
WebView1.SetTopAndBottom(0,100%y)

You still can zoomin/out, but when you let go it returns to the original fit. Someone may offer a better way.

Works great! You have been such huge help @Mahares! I can stop smashing my head into the wall now

HimeAnator · Feb 14, 2014

Mahares said:
To get the photo to fit the webview, you can use the below code for TempHtml:

B4X:

TempHtml="<html><body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'><center>" _ & "<img src=" & ImagePath & " width='100%' height='100%'/></center>" _ & "</body></html>"

You can add this line to the code to fit the webview to the device screen:

B4X:

WebView1.Height=Activity.Height :WebView1.Width=Activity.Width

Or you can add this to the Designer script:
WebView1.SetLeftAndRight(0,100%x)
WebView1.SetTopAndBottom(0,100%y)

You still can zoomin/out, but when you let go it returns to the original fit. Someone may offer a better way.

Ok I've been working with the code for sometime now and I thought I had it working how I wanted it to, but after really experimenting with it, the pinch zoom is really finicky. When the user zooms and lets go it snaps back to it original size and that fine, but I noticed that when it snaps back the "+" and "-" zoom indicators still indicated that its zoomed in and this eventually causes it to stop zooming all together because it thinks that its already zoomed in all the way and you have to then zoom out until the "-" (magnifying glass zoom out button) becomes disabled showing that its no longer zoomed in. So my question is, is there a way to have the image stay zoomed in or programmatically zoom all the way out when the user stops touching the webview?

Android Question Display Image From SD Card In WebView?

HimeAnator

Member

Mahares

Expert

JoeR

Member

HimeAnator

Member

Mahares

Expert

HimeAnator

Member

HimeAnator

Member

Android Question Display Image From SD Card In WebView?

HimeAnator

Member

Mahares

Expert

JoeR

Member

HimeAnator

Member

Mahares

Expert

HimeAnator

Member

HimeAnator

Member

Privacy & Transparency

Privacy & Transparency