通过 webview 显示的 Android 本地图像模糊
Posted
技术标签:
【中文标题】通过 webview 显示的 Android 本地图像模糊【英文标题】：Android local image displayed via webview is blurry 【发布时间】：2011-09-24 18:13:46 【问题描述】：我有一个 webview 从 assets/ 文件夹加载图像。图像以 100%（或更多）缩放显示，其清晰度与 100% 时的真实图像不同
如何设置 webview 以显示缩小的图像而不降低质量？
另外，我使用的是 webview，因为 ImageView 需要我重新发明平滑滚动、点击缩放、捏合缩放等
洞察力赞赏
【问题讨论】：
如何将图片从资产/文件夹中获取到 WebView？如果您发布代码可能会有所帮助.... 另外，这是什么手机？我收到某人（在索尼手机 IIRC 上）的报告，称他的手机上的图像会显得模糊，我仍在尝试找出问题所在。 在这种情况下您是否可以控制 html？ 没有 HTML，只是使用指向本地资产文件夹的 loadURL 加载图像。老实说，只有一种方法可以做到这一点....，我无法控制 HTML，但如果制作一个调用本地图像的本地 HTML 页面，给了我更多控制权，那就告诉！ 【参考方案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>imgimage-rendering: optimizeQuality; htmlfont-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;帮我解决了
【讨论】：
以上是关于通过 webview 显示的 Android 本地图像模糊的主要内容，如果未能解决你的问题，请参考以下文章
react-native-webview Android 无法正确加载本地html文件(显示源代码)