Fit image in webview
I am planning to display images from SD card in a webview in order to take advantage of he built in zoom capabilities of webview. However, I am facing an issue with displaying images that are bigger than screen size (e.g. 1800x1200) to fit the screen initially, like in an ImageView. I want the image to be displayed in full at first and provide zoom control to the users. I have tried using WRAP_CONTENT for webview's width and height, but that does not work. Any ideas? Following is a code snippet I am using:
String path = getRealPathFromURI(mUriList.get(0)); // this gets the file path
webView = (WebView) findViewById(R.id.WebView01);
WebSettings settings= webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setSupportZ开发者_如何学Gooom(true);
webView.loadUrl("file://" + path);
private WebView mWebView2;
mWebView2 = (WebView)findViewById(R.id.webview);
mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
mWebView2.loadDataWithBaseURL("file:///android_asset/", "<img src=\"banner5.png\" height=\"98%\" width=\"100%\"/>", "text/html", "utf-8", null);
Images are in the assets folder
If you write your HTML correctly, you don't have to do any "setLoadWithOverviewMode", "setUseWideViewPort" or "setInitialScale". And there is absolutely no reason to enable JavaScript.
This one line worked for me:
webView.loadDataWithBaseURL("file://" + directory,
"<img src=\"" + name + "\" width=\"100%\"/>", "text/html", "utf-8", null);
The underlining HTML code is:
<img src=YourImage.png width="100%" />
, by not setting a height, its aspect ratio will be kept.
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true)
精彩评论