通过 webview 显示的 Android 本地图像模糊答案

【问题标题】：Android local image displayed via webview is blurry通过 webview 显示的 Android 本地图像模糊
【发布时间】：2011-09-24 18:13:46
【问题描述】：

我有一个 webview 从 assets/ 文件夹加载图像。图像以 100%（或更多）缩放显示，其清晰度与 100% 时的真实图像不同

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

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

洞察力赞赏

【问题讨论】：

如何将图片从资产/文件夹中获取到 WebView？如果您发布代码可能会有所帮助....
另外，这是什么手机？我收到某人（在索尼手机 IIRC 上）的报告，称他的手机上的图像会显得模糊，我仍在尝试找出问题所在。
在这种情况下您是否可以控制 html？
没有 HTML，只是使用指向本地资产文件夹的 loadURL 加载图像。老实说，只有一种方法可以做到这一点....，我无法控制 HTML，但如果制作一个调用本地图像的本地 HTML 页面，给了我更多控制权，那就告诉！

标签： android image webview scaling

【解决方案1】：

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

【讨论】：

图库应用程序？我可以在视图中使用该 API 吗？我现在正在阅读developer.android.com/reference/android/widget/…，但使用示例会有所帮助，感谢您提供更多见解
ImageView 被避免，因为我不想重新实现缩放控件和平滑的双向滚动
不，您不能像那样集成它...您只能使用意图转发它...取决于您的用例。另一种选择是从图库应用程序中窃取一些代码，这样您就不必从头开始编写它：android.git.kernel.org/?p=platform/packages/apps/…

【解决方案2】：

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

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

解决方案说明： 在您的 HTML 中（我以编程方式在活动中创建它），启用缩放，然后以编程方式检测逻辑密度。计算比例（即 XXHDPI 设备上的 300%）并将该值放入您的 HTML 中，否则您的字体将是 TINY！在您的可绘制资源中，确保您使用的图形与设备的分辨率相匹配（即 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);

【讨论】：

我为这个解决方案感到非常自豪......我的午餐需要喝啤酒来庆祝。
这很聪明，在这一点上我确实使用了一个可以平移、缩放等的扩展 imageview 全屏
注册。 in a webview there's no concept of XXHDPI and XHDPI - 你评估 CSS 媒体查询，分别检查 javascript 中的 window.devicePixelRation 了吗？
我读了很多关于 WebView 的文章，我读到 WebView 只知道 HDPI/MDPI/LDPI
更新：我今天发现将android:targetSdkVersion 设置为 19 及以上会破坏缩放。我还没有调试它，但我只是将 API 级别设置回 17

【解决方案3】：

不确定为什么需要所有这些相当复杂的答案？

我通过使用 400 像素的图像解决了 200 像素的图像模糊的问题，并在 CSS 中将其缩小了 2 倍。 DIV 元素设置为 200px 和 background-size:contain/200px 50px;帮我解决了

【讨论】：