CODEWITHSUNDEEP
androidwebviewbitmap
breadbin
breadbin

Reputation: 584

Android: How to Display a Bitmap in a WebView?

I'm using a WebView for displaying a map-like image, due to the built-in panning and zooming functionality. However, I need to overlay some other information (markers etc) at certain points on the map image, and display all of this.

So I take my base map image as a Bitmap, and overlay my other images over that (using Canvas and more Bitmaps), giving me a final Bitmap with all the info. Because I need to edit the image at runtime, I can't use a pre-made file. Implementing the overlaying of bitmaps is not the problem, the problem is that I don't know how to easily display the resulting image with pan and zoom capabilities.

Is there a way to display a Bitmap using a WebView? Or any other suggestions?

Upvotes: 10

Views: 15959

Answers (5)

Rafique Mohammed
Rafique Mohammed

Reputation: 3806

You don't need placeholder if u want to load image in webview

You can directly load the dataurl in the webview. For ex:

ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
byte[] byteArray = byteArrayOutputStream.toByteArray();
String imgageBase64 = Base64.encodeToString(byteArray, Base64.DEFAULT);
    String dataURL= "data:image/png;base64," + imgageBase64;

webview.loadUrl(dataURL); //pass the bitmap base64 dataurl in URL parameter

Hope it helps others! :-)

Upvotes: 2

peter.bartos
peter.bartos

Reputation: 12045

Using the link from itsrajesh4uguys, I've created this code snippet:

// Desired Bitmap and the html code, where you want to place it
Bitmap bitmap = YOUR_BITMAP;
String html="<html><body><img src='{IMAGE_PLACEHOLDER}' /></body></html>";

// Convert bitmap to Base64 encoded image for web
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
byte[] byteArray = byteArrayOutputStream.toByteArray();
String imgageBase64 = Base64.encodeToString(byteArray, Base64.DEFAULT);
    String image = "data:image/png;base64," + imgageBase64;

// Use image for the img src parameter in your html and load to webview
html = html.replace("{IMAGE_PLACEHOLDER}", image);
webview.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", "");

Upvotes: 33

breadbin
breadbin

Reputation: 584

The answer seems to be: no, displaying a local bitmap object in a webview, without saving it to a file, is not possible.

Upvotes: 1

Shrikant Ballal
Shrikant Ballal

Reputation: 7087

You dont require Bitmap, just its name is enough. Try following:

html = "<html><img src=\"" + imageUrl
                        + "\"></html>";
final WebView webView = (WebView) view
                    .findViewById(R.id.yourWebView);
wvImageView.getSettings().setJavaScriptEnabled(true);
wvImageView.loadDataWithBaseURL("", html, "text/html", "utf-8", "");

This should display your image on WebView. If you want to provide zooming facility, try this:

webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);

Upvotes: -2

itsrajesh4uguys
itsrajesh4uguys

Reputation: 4638

Normally in webview we can set the images using html tags.. this wont make any issues.

any way use this link for sample question and answer

Why Bitmap to Base64 String showing black background on webview in android?

Upvotes: 1

Related Questions