发表新帖
发表新帖

Android local image displayed via webview is blurry

后端 未结
关注
3 1014
庸人自扰
庸人自扰 2021-01-19 18:06

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%

相关标签:
3条回答
  • 我寻月下人不归
    2021-01-19 18:18

    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

    0 讨论(0)
  • 醉酒成梦
    2021-01-19 18:30

    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);
    0 讨论(0)
  • 独厮守ぢ
    2021-01-19 18:33

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题