Android:如何将矢量可绘制图像加载到 WebView 中？

Question

对不起，如果这是重复的，但我努力搜索但没有找到这个问题...

回到过去的 Android 时代，您可以将类似这样的内容添加到 WebView 的源 html 中:

<img src='file:///android_res/drawable/my.png'/>

它会在 WebView 中正确显示 my.png。但是——Android 现在支持(并且我们更喜欢使用)这些新奇的 vector drawables和 Android Studio 的 Vector Asset Studio使得从 SVG 文件或其他文件中导入它们变得非常容易。

最棒的是，为了向后兼容，.png 会在构建期间针对各种 dpi/屏幕尺寸自动生成，以支持旧设备。因此，如果您的目标是旧设备，那里有 .png 图像。

要是我能联系到他们就好了。因为，据我所知，使用矢量图形确实破坏了那些 file:///android_res/drawable/ img WebView 中的链接。这很奇怪，因为正如我所说，如果只是看的话，还有 .png 文件可供查看。

我想过一些方法来解决这个问题，但没有一个奏效:

1. 由于 .png 是即时生成的并且包含在 .apk 中，我想也许我可以使用类似 file:///android_res/drawable-hdpi-v4/my.png 的内容直接指向生成的文件之一。 . (我检查了 .apk 文件，其中一个文件就在那里……)但没有这样的运气。损坏的图像。

2. 好吧，我想——也许有一种方法可以让 WebView 直接显示矢量对象。也就是说，WebView 可能会识别出 <img src="file:///android_res/drawable/my_image.xml"/>。或类似的东西。我的意思是，Chrome 可以正确渲染 svg 吗？也许它也支持 .xml 矢量格式。但这里也没有骰子。 (即使它有效，也不太可能支持旧的 pre-chromium webview 版本。)

3. 我尝试的第三件事是在 res/drawable 中只包含一个 xxxhdpi 大小的 .png这样 webview 就会找到它并希望显示它。不幸的是，这也不起作用。看来 /drawable 中只有一个 .xml 向量足以让它阻止 png，无论它是否在 /drawable 中或 /drawable-xxxhdpi目录。

那么显而易见的问题是:有没有办法让 WebView 显示矢量 xml(或生成的相关支持 .png)？我们如何在带有矢量可绘制对象的 WebView 中从 HTML 访问可绘制对象？特别是无需以编程方式执行任何操作？

有人知道这是怎么回事吗？我想接下来要做的是深入研究 chromium/android 源代码，试图找出如何 file:///android_res/drawable/可行，但这听起来并不有趣，所以如果有人有答案，那将会很有帮助。

我可能在这里遗漏了一些非常明显的东西。提前致谢!

更新:我尝试/排除的其他事情包括 (1) 删除图像名称中的下划线(因为我认为它们可能会被替换为“/”)，(2) loadDataWithBaseUrl() 中 baseurl 的各种排列|

Answer 1

好吧，四年后，我想出的最佳解决方案就是拥有两个矢量文件——(1) 应用程序的 xml Android 矢量文件，然后 (2) .svg 中的相同图像网页 View 的格式。与为每个 dpi 等提供单独的 .png 或 .gif 等相比，这仍然是一个更小的解决方案。

SVG 和矢量格式在内部非常相似，因此将一种格式转换为另一种格式并不困难。事实上，Android Studio 会转换 SVG->XML。如果你想走另一条路，只需比较几个例子。

因此只需将您的 svg 放在 assets/svg/ 中，然后您就可以在 HTML 中使用 <img src='file:///android_asset/svg/mysvg.svg'/> 从 webview 进行访问。

仍然存在存储问题。但是 svgs 相对较小(并且您可以缩小——即挖出 SVG 文件中 webview 未使用的一些额外的绒毛)所以它没有替代方案那么糟糕——提供大型二进制图像文件应用程序。