当前位置：文江博客话题详情

Android通过webview显示本地图片模糊

发布于 2024-11-17 18:06:19 字数 192 浏览 2 评论 0原文

我有一个从 asset/ 文件夹加载图像的网络视图。图像显示为缩放 100%（或更多），并且与真实图像在 100% 时的清晰度不同

如何设置 webview 以显示缩小的图像而不降低质量？

另外，我正在使用 webview，因为 ImageView 需要我重新发明平滑滚动、点击缩放、捏合缩放等，因此

Insight 赞赏

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我纯我任性 2024-11-24 18:06:19

我记得那个问题。 Webview 可能出于内存问题自动对较大图像进行下采样。如果你想控制质量，你可能必须使用 ImageView。您也可以尝试使用图库应用程序。

回复收藏 0 原文

莫言歌 2024-11-24 18:06:19

我找到了在网络视图中显示高质量图像的解决方案。（让大家知道我讨厌使用网络视图！）

根本原因：
开箱即用，在 web 视图中没有 XXHDPI 和 XHDPI 的概念 - 如果您确实在 XXHDPI 或 XHDPI 设备上使用这些图像，那么该图像太大了！所以你最终会使用 HDPI/MDPI 图像......至少我这样做了，然后图像看起来很模糊。

解决方案描述：
在您的 HTML 中（我以编程方式在活动中创建它），启用缩放，然后以编程方式检测逻辑密度。计算比例（即 XXHDPI 设备上的 300%）并将该值放入您的 HTML 中，否则您的字体将很小！在您的可绘制资源中，确保您使用的图形与设备的分辨率相匹配（即 XXHDPI 设备上的 XXHDPI 图像） - 这是替换 XXHDPI res 文件夹中的 MDPI 图像的提醒。

编码解决方案：

// 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);

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 原文