Android:如何将矢量可绘制图像加载到Webview中? [英] Android: How to load a vector drawable image into a webview?

问题描述

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

Sorry if this is a repeat but I searched diligently and didn't find this question asked yet...

因此，在过去的Android时代，您只需将类似的内容添加到WebView的源html中即可:

So back in ye olden days of Android, you could just add something like this to a WebView's source html:

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

它会在WebView中正确显示my.png.但是-Android现在支持(并且更喜欢我们使用)这些新奇的 vector可绘制对象，而Android Studio的 Vector Asset Studio 可以使从SVG文件或其他文件中导入它们确实非常容易.

And it would display my.png correctly in the WebView. But-- Android now supports (and prefers we use) these new-fangled vector drawables, and Android Studio's Vector Asset Studio makes it really easy to import them from SVG files or whatever.

伟大的事情是，为了向后兼容，在构建期间会自动生成各种dpi/屏幕尺寸的.png文件，以支持较旧的设备.因此，如果您定位的是较旧的设备，则那里有.png图像.

The great thing is that for backwards compatibility, .pngs are automatically generated during the build for various dpi/screen sizes to support older devices. So if you're targeting an older device, there are .png images there.

如果我能联系到他们.因为据我所知，使用矢量图形确实会中断WebView中的file:///android_res/drawable/ img链接.这很奇怪，因为正如我说的那样，如果只是看就可以看到.png文件.

If only I could reach them. Because, as far as I can tell, using vector graphics does break those file:///android_res/drawable/ img links in WebViews. Which is weird, because as I say there are .png files to see, if it only looked.

我已经考虑过几种方法来解决此问题，但是没有一个起作用:

I've thought about a few methods to fix this, but none have worked:

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

1. Since .pngs are generated on-the-fly and are included in the .apk, I thought maybe I could point directly to one of the generated files with something like file:///android_res/drawable-hdpi-v4/my.png. (I checked the .apk file and that's where one of them was..) But no such luck there. Broken image.

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

Okay, I thought-- maybe there's a way to get the WebView to display the vector objects directly. That is, maybe the WebView would recognize an <img src="file:///android_res/drawable/my_image.xml"/> or something similar. I mean, Chrome can render svg right? Maybe it supports the .xml vector format too. But no dice here either. (Even if it had worked, it would be unlikely to support older pre-chromium webview versions.)

我尝试的第三件事是在res/drawable中仅包含一个xxxhdpi大小的.png，以便Webview可以找到它并希望显示它.不幸的是，这也不起作用.看来，在/drawable中只有.xml矢量就足以阻止png，无论它位于/drawable还是/drawable-xxxhdpi目录中.

The third thing I tried is to include just one xxxhdpi-sized .png in res/drawable so that the webview would find it and hopefully display it. Unfortunately, this doesn't work either. It appears that just having an .xml vector in /drawable is enough to have it block the png, no matter if it's in the /drawable or /drawable-xxxhdpi directories.

一个显而易见的问题:是否有一种方法可以使WebView显示矢量xml(或生成的相关支持.png)?如何在带有Vector可绘制对象的WebView中从HTML访问可绘制对象? Esp.无需以编程方式进行任何操作?

So the obvious question: Is there a way to get the WebView to either display the vector xml (or the associated support .png that was generated)? How do we access drawables from HTML in a WebView w/Vector drawables? Esp. without having to do anything programmatically?

任何人都知道这应该如何工作吗?我想接下来要做的是深入研究Chrome/android源码，尝试找出file:///android_res/drawable/的工作方式，但这听起来并不有趣，所以如果有人有答案，那将是有帮助的.

Anyone know how this is supposed to work? I guess the next thing to do is delve into the chromium/android source to try to find out how file:///android_res/drawable/ works, but that doesn't sound fun, so if anyone has an answer, that would be helpful.

我可能在这里错过了一些非常明显的东西.提前谢谢！

I'm probably missing something really obvious here. Thx in advance!

更新:我尝试/排除的其他事项包括(1)删除图像名称中的下划线(因为我认为它们可以用"/"代替)，(2)

Update: Other things I tried/ruled out include (1) removing underscores in image names (as I thought they might be replaced with "/"), (2) various permutations of baseurl in loadDataWithBaseUrl()

推荐答案

好了，四年后，我想出的最好的解决方案是只有两个矢量文件-(1)用于android的xml Android矢量文件应用程序，然后(2)将.svg格式的相同图像用于Web视图.与为每个dpi等分别提供.png或.gif相比，这仍然是一个较小的解决方案.

Well, four years later and the best solution I've come up with is just to have two vector files-- (1) the xml Android vector file for the app, and then (2) the identical image in the .svg format for the webview. This is still a smaller solution compared with providing a seperate .png or .gif for every dpi, etc.

SVG与矢量格式在内部非常相似，因此将一个转换为另一个并不困难.实际上，Android Studio会转换SVG-> XML.如果您想采用其他方法，只需比较几个示例即可.

SVG and the vector format are internally very similar, so it's not difficult to convert one to the other. In fact, Android Studio will convert SVG->XML. If you want to go the other way, just compare a few examples.

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

So just put your svgs in assets/svg/, and then you can access from a webview using <img src='file:///android_asset/svg/mysvg.svg'/> in your HTML.

仍然有存储命中.但是svg相对较小(您可以最小化-例如，从SVG文件中挖出一些webview不会使用的多余的绒毛)，所以它并不比其他方法差-在SVG文件中提供较大的二进制图像文件apk.

There's still a storage hit. But svgs are relatively tiny (and you can minify-- ie, scoop out some of the extra fluff in the SVG file that isn't used by the webview) so it's not as bad as the alternative-- providing large binary image files in the apk.

这篇关于Android:如何将矢量可绘制图像加载到Webview中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！