I'm using following code to display an image in a WebView:
final WebView web = (WebView) findViewById(R.id.webView);
web.getSettings().setJavaScriptCanOpenWindowsAutomatically(false);
web.getSettings().setPluginsEnabled(false);
web.getSettings().setSupportMultipleWindows(false);
web.getSettings().setSavePassword(false);
web.getSettings().setBuiltInZoomControls(true);
web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setLoadWithOverviewMode(true);
String url = extras.getString("url");
String x = "<html><head><meta name=\"viewport\" content=\"width=device-width\"/><style type=\"text/css\">html, body {margin: 0;padding: 0;} img {border: none;}</style><head><body style=\"background: black;\"><table><tr><td align=\"center\"><img src=\"" + url + "\" /></td></tr></table></body></html>";
web.loadDataWithBaseURL(null, x, "text/html", "utf-8", null);
According to the manual, it should be started in overview mode, so it should be maximally zoomed out (and that's what I want to do). Unfortunately, the image is zoomed in. How can I fix it?
I think what is happening here is that the width=device-width says the viewport should be 480 pixels wide (or whatever the device is). So an image that's wider than that will be partly off the screen and need to be scrolled.
If you want the page to open in overview mode, I think you should set that when creating the WebView and not specify any viewport.
Related
I have a android web view
webview = FindViewById<WebView>(Resource.Id.webView);
I load the htmlData from the url like so:
webview.LoadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
The content includes text, images and embedded youtube videos.
In the case above the text and images load correctly but not the videos as i have not enabled Javascript yet.
Therefore i enable JavaScriptEnabled.
webview.Settings.JavaScriptEnabled = true;
webview.Settings.DomStorageEnabled = true;//This does not make any difference
However, when i do enable Javascript the images no longer load within my webview but the videos do.
After debugging, I can see that the entire image tag is being replaced with  
So i would like to know how to have javascript enabled and have my images still load within my htmldata at the same time.
I guess JavaScript may change the src attribete of img tag.
You can do RemoteDebug of webview. Let's check the html dom.
developers.google.com/web/tools/chrome-devtools/debug/…
I'm tring to load this url in a WebView :
https://crocodoc.com/view/PFk2xRsJYPjfDhhm-2nfzi1CnZtUvvXqpy7Uh7uCcFGTfiFDbVpzbgJ2kSUyGGRkf1M_eq_COHKAf14Okz0ShL0WzoNiprqf2UWXUSP7hJ0CHiCGaP4Vs7CHKJAW2A
I tried the basic way :
wv.loadUrl("..");
within an Iframe :
String str2 = "<body style=\"margin:0px;padding:0px;overflow:hidden\">\n" +
"<iframe src=\""+"https://crocodoc.com/view/"+sessionId+"\" frameborder=\"0\" style=\"overflow:hidden;height:100%;width:100%\" height=\"100%\" width=\"100%\"></iframe>\n" +
"</body>";
wv.loadData(str2, "text/html","utf-8");
With a classic client, a chrome chient, enabling more of less every WebView Setting that I could think of. But I loose the controls, I just see an horribele zommed view of the document, I can't zoom etc...
I only left :
wv.getSettings().setJavaScriptEnabled(true);
In my phone browsers It displays as I want it to.
So my question is : why ? how should I do to make it look the same way than in firefox or chrome.
Thanks
I have pictures/movies in my webview, and i have a problem with the resize.
I have a CSS for my webview in which i set
img{width:100%;}
But how to set the just height ? Because currently I have picture which take the half of the screen.
My other problem is i have
in my content, how can I delete it ?
To modify the styling of the HTML you could load a custom css like this:
final String customCssLink = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">";
webView.loadDataWithBaseURL("file:///android_asset/", customCssLink + html, "text/html", "UTF-8", null);
And you can remove all of the from the HTML like this:
String.replace(" ", "");
But with both those things you have to be very careful. Modifying HTML is just like HTML parsing a big source of bugs and rather error prone. If at all possible I would advice against doing stuff like this, but if you have no other choice try to at least be as careful as possible.
I create webview in code. In this webview I show pictures. Now I have two questions. How I can show image in full size, because my pictures has resolution 1381x1829 and I see only part of this picture. And second. As you can see in code I load pictures from assets, but I want to load pictures from sd card. How I can do that?
This is code:
WebView web = new WebView(getContext());
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setBuiltInZoomControls(true);
web.loadUrl("file:///android_asset/lj.png");
addView(web);
this solution works perfectly for me :
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
This method webview.getSettings().setBuiltInZoomControls(true) will let you implement build in zoom control for non-multitletouch screen
You can load image from anywhere from sdcard to webview using this code.
That is if u want to load multiple image from multiple location.
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString() + "/Your/Folder";
String imagePath = "file:/"+ base + "/test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadData(html, "text/html","utf-8");
But if u want to load images exist under the same parent folder, this will do the trick
String imagePath = "test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadDataWithBaseURL("file:///mnt/sdcard/Your/Folder/", html, "text/html","utf-8",null);
BE WARN, if u try to load hi-res image like 1600x1840 to webview, webview WILL reduced image res to maintain memory usage, which result in BAD looking image
Add this to your HTML :
<style type='text/css'>
img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}
</style>
This will make your images scale to fit the screen size.
For remove default padding - don't forget set style:
<html><head></head><body style="padding:0; margin:0;"><img src=""+ gifUrl + ""
width="100%"></body></html>
In my app, I display pictures thanks to a webView. So for each image I create small HTML code that I load with the webView. So my html code consist basically in a img tag (with the path to my picture).
My pictures have different sizes, that's why I'd like to set my webView zoom to fit the pictures width to the webView width. So the user don't have do zoom in or out to be able to see the entire picture.
Is there a way to achieve it ?
Thanks.
If you are creaing the HTML code (which you say that you are), you can cheat:
In the html code:
img src="xxx" width="100% >
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
What worked for me was this: I read that in order to fit the width of the screen you should add this to your HTML or xml inside the field:
width="100%"
So what I did was, instead of scaling and zooming the images, I got the xml, put it in a StringBuilder, found the src="https://blablabla.com/image.png" that is inside the field and just before the "src" substring I inserted the "width="100%"", then y set my webView with the StringBuilder, mi code is this:
public void setWebViewWithImageFit(String content){
// content is the content of the HTML or XML.
String stringToAdd = "width=\"100%\" ";
// Create a StringBuilder to insert string in the middle of content.
StringBuilder sb = new StringBuilder(content);
int i = 0;
int cont = 0;
// Check for the "src" substring, if it exists, take the index where
// it appears and insert the stringToAdd there, then increment a counter
// because the string gets altered and you should sum the length of the inserted substring
while(i != -1){
i = content.indexOf("src", i + 1);
if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
++cont;
}
// Set the webView with the StringBuilder: sb.toString()
WebView detailWebView = (WebView) findViewById(R.id.web_view);
detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
Hope this helps, it took me some hours to figure out how to solve this.
Is there a reason why you don't just use some javascript to pass in the images into the android application and bring up a Custom Dialog with the images in that dialog so that it scales according to the Content.
Personally, I think this solution is more elegant to your approach.
You can use a little jQuery in the web page to accomplish it as well.
Something like:
$(document).ready(function(){
var windowWidth = $(window).width()+"px";
$("#imagID").width(windowWidth);
});
I found a solution. Use this calculation:
device-width * (152 / density)
Retrieve device-width and density using displayMetrics.widthPixels and displayMetrics.densityDpi
Set calculated as width in img tag
the value 152 is originally was 160 but when 160 used, it looks like Image is bigger than screen.
The result is, image initially fit to screen and, zoom in works fine.
Is there a reason you are using a WebView to accomplish this? With an ImageView you can set the scaleType to fit the image to the size of the ImageView.