问题
I have a webview loading an image from the assets/ folder. The image is displayed zoomed 100% (or more) and does not have the same clarity as the real image has at 100%
How can I set the webview to display the image zoomed out AND not downscale the quality?
Also, I am using a webview because ImageView would require me to reinvent smooth scrolling, tap to zoom, pinch to zoom, etc
Insight appreciated
回答1:
I recall that problem. Webview automatically downsamples larger images probably out of memory concerns. If you want control of the quality you probably have to use ImageView. You could also try to use the gallery application instead.
回答2:
I found the solution to showing good quality images in a webview. (let it be known that I loathe working with the webview!)
Root Cause: Out of the box, in a webview there's no concept of XXHDPI and XHDPI - if you do use those images on an XXHDPI or XHDPI device then the image is too damn large ! So you end up using HDPI/MDPI images... at least I did and then the images look blurred.
Solution Description: In your HTML (I programmatically create it within the activity), enable scaling and then programmatically detect the logical density. Calculate the scale (i.e. 300% on a XXHDPI device) and put that value into your HTML otherwise your font will be TINY! Within your drawable resources, ensure you're using graphics that match the resolution of the device (i.e. XXHDPI images on an XXHDPI device) - this is a reminder to replace the MDPI images in your XXHDPI res folder.
Coded Solution:
// constants needed to put together a nice Android webview-friendly page
private static final String HTML_STYLE = "<style>img{image-rendering: optimizeQuality;} html{font-size: [TBD]% !important}</style>";
private static final String HTML_META = "<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no; target-densitydpi=device-dpi' />";
private static final String HTML_HEAD = "<html><head><title>description</title>"+HTML_META+HTML_STYLE+"</head><body bgcolor=\"black\"><font color=\"white\">";
private static final String HTML_TAIL = "</font></body></html>";
// content to show in the webview
final String strBody = "<ul><li>stuff1</li><li>stuff2</li><li>stuff3</li></ul><p align=\"center\"><img src=\"file:///android_res/drawable/image.png\"></p>";
// get the logical font size
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int iFontScale = (int) (displaymetrics.scaledDensity * 100.0f);
// alter the HTML to programmatically insert the font scale
final String strCompleteHTML = (HTML_HEAD+strBody+HTML_TAIL).replace("[TBD]", String.valueOf(iFontScale));
// configure the webview and load the HTML
final WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setHorizontalScrollBarEnabled(false);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.loadDataWithBaseURL("file:///android_asset/", strCompleteHTML, "text/html", "utf-8", null);
回答3:
Not sure why all those rather complicated answers are needed?
I solved the problem where a 200px image was blurry by using a 400px image and just downsize it by the factor 2 in CSS. DIV element set to 200px and background-size:contain/200px 50px; solved it for me
来源：https://stackoverflow.com/questions/6514435/android-local-image-displayed-via-webview-is-blurry