10

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?

breadbin
  • 584
  • 1
  • 11
  • 19
  • There are pretty nice libraries which support panning and zoom in Android. One example - https://github.com/sephiroth74/ImageViewZoom – Heitara May 08 '14 at 10:29

5 Answers5

33

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", "");
peter.bartos
  • 11,855
  • 3
  • 51
  • 62
  • thanks for your comment. you are right. I added an extra line to my answer to explain the solution. – peter.bartos May 11 '14 at 19:47
  • 1
    and I think the base url is irrelevant, it worked for me with webview.loadData as well – 2cupsOfTech May 12 '14 at 01:58
  • Here, with the base-64 encoding, there's no risk; but it's useful to know that, otherwise, loadDataWithBaseURL is the function to call, even when the base url is irrelevant (and can effectively be passed as null). See thread https://stackoverflow.com/questions/12332929/webview-webpage-not-available-but-i-load-it-from-an-html-string/20356555#comment99045786_20356555 . – Papa Smurf May 30 '19 at 16:49
  • How could I do the same with RoundedBitmapDrawable ? – chaviaras michalis Feb 25 '20 at 09:21
  • If someone has a solution to avoid the webview then afterwards downsampling the bitmap, I'd love to hear it. It seems to be out of our control – CaptainCrunch Nov 04 '20 at 17:06
  • `webView.getSettings().setDisplayZoomControls(false);` It will hide Default ZoomControls –  Oct 02 '21 at 08:15
2

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! :-)

Rafique Mohammed
  • 3,666
  • 2
  • 38
  • 43
1

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?

Community
  • 1
  • 1
itsrajesh4uguys
  • 4,610
  • 3
  • 20
  • 31
1

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

breadbin
  • 584
  • 1
  • 11
  • 19
  • 2
    False. Create Img tag to display image like html emails with inlined images. Uses tag, but src is not a url but base64 encoded image data. img src can still be modified via javascript. – JSON Dec 19 '13 at 02:23
  • It's possible to load and display a Bitmap. Check teepee SONY answer. It explains it how to do that. – Heitara May 08 '14 at 10:26
-2

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);
Shrikant Ballal
  • 7,067
  • 7
  • 41
  • 61
  • Is this code for displaying an image taken from a URL? That's not what I'm trying to do. – breadbin Jun 01 '12 at 11:49
  • The above code just requires the fully qualified path to your image. Try to give imagePath and check if it works. – Shrikant Ballal Jun 01 '12 at 12:00
  • So I would need to save my modified bitmap as a file, and then read that? – breadbin Jun 01 '12 at 13:50
  • You don't have to save your file, you just need to get the full path of image. – Shrikant Ballal Jun 01 '12 at 17:10
  • When you overlay many images over map image, how you create bitmap of those many images and how you put those images on map image? If you can create a bitmap of an image, you can get its name as well. So you just need to retrieve its name. But still I would like to ask you, how you you are going to put an image on map image? That will be a very good info for me as well. – Shrikant Ballal Jun 05 '12 at 07:41
  • I think this approach is flawed for me (overlaying bitmaps to make one bitmap), but I would like to know exactly what I would need to use here for the image's name/path. Are you literally talking about the variable name, or something else? – breadbin Jun 06 '12 at 10:31
  • There is some misunderstanding. My approach doesn't overlay bitmaps to make one. I was commenting on your question. In that, you said: "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." How you are acheiving this, that I want to know... – Shrikant Ballal Jun 06 '12 at 10:34
  • I overlay one bitmap over another using: public Bitmap overlayBitmaps(Bitmap baseImg, Bitmap overlayImg) { Bitmap finalImg = Bitmap.createBitmap(baseImg.getWidth(), baseImg.getHeight(), baseImg.getConfig()); Canvas canvas = new Canvas (finalImg); canvas.drawBitmap(baseImg, new Matrix(), null); canvas.drawBitmap(overlayImg, new Matrix(), null); return finalImg; } I never said you were overlaying images, all I'm asking is the original question, how do I get the image path you say I need to use to display the bitmap object in a webview? – breadbin Jun 06 '12 at 10:47
  • I searched a bit about how to get image name from bitmap, but could not find it. If, any how, you find the image path of bitmap, the code I have given will definitely solve your problem, because, I am also using the same code to show bitmap into webView. Can you tell me, where you are creating baseImg? Can you get the image name from there? – Shrikant Ballal Jun 06 '12 at 11:03
  • I'm not sure what form of the name you're referring to - if it's anything other than the variable name, then no, I can't. – breadbin Jun 06 '12 at 13:52
  • I guess Shrikant didn't understand OP's question at all. – user1914692 Jul 15 '13 at 01:29
  • I think user1914692 did not understand my answer at all. If you read it carefully, I am passing the image path to webview, the image path is a local image path. A creation of bitmap requires rich resources, but in this case you don't have to use bitmap at all. Just its path will show the image in webview with inbuilt zooming control. – Shrikant Ballal Jul 15 '13 at 05:08