WebView自动缩放本地图像
我的问题类似于这个,但足够不同,我将发布一个新的。
我正在编写一个图像查看器,它从远程服务器下载 PNG,将其保存到存储中,然后在 WebView 中打开它,以便免费获得多点触控缩放。这些图像通常是文档,因此用户希望能够放大得很远。我正在发送足够分辨率的图像来实现此目的,但是 WebView 似乎通过将图像缩放到屏幕尺寸来“帮助”我。这意味着我的图像分辨率太低,无法正确放大。
我已经对此进行了搜索,并且发现其他一些人遇到了 类似问题,但唯一我发现的可能解决方案是将图像切割成图块并使用 HTML 重新组合它们,然后再将其加载到视图中。这看起来像是一个拼凑,我正在询问 StackOverflow hivemind 是否有人有办法关闭这种扩展,或者有替代方法来获得我需要的东西。
初始化 WebView
的代码:
viewer = (WebView)findViewById(R.id.activity_imageviewer_webview);
viewer.setBackgroundColor(0);
WebSettings settings = viewer.getSettings();
settings.setJavaScriptEnabled(false);
settings.setBuiltInZoomControls(true);
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
将图像加载到 WebView
的代码:
viewer.loadUrl(Uri.fromFile(imageFile).toString());
My question is similar to this one, but is different enough that I am going to post a new one.
I am writing an image viewer that downloads a PNG from a remote server, saves it to storage, and then opens it in a WebView
so that I get multi-touch zoom for free. These images are usually going to be documents, so the user will want to be able to zoom in very far. I am sending down images of sufficient resolution to enable this, but the WebView
seems to be "helping" me by scaling my image to the screen size to start out with. This means that my image is much too low resolution to be properly zoomed in on.
I have searched around for this, and I have found some other people encountering a similar problem, but the only possible solution I found was to cut the image up into tiles and reassemble them using HTML before loading it in the view. This seems like a kludge, and I am asking the StackOverflow hivemind if anyone has either a way to turn off that scaling, or an alternative method to get what I need.
The code that initializes the WebView
:
viewer = (WebView)findViewById(R.id.activity_imageviewer_webview);
viewer.setBackgroundColor(0);
WebSettings settings = viewer.getSettings();
settings.setJavaScriptEnabled(false);
settings.setBuiltInZoomControls(true);
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
The code that loads the image into the WebView
:
viewer.loadUrl(Uri.fromFile(imageFile).toString());
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
更改视口属性可能会有所帮助,请查看
元标记
html 标头中的
Changing the viewport properties might help, take a look at the
<meta name="viewport" ...>
meta tag in the html header
我们最终通过使用平铺方法以艰难的方式解决了这个问题。我们在服务器上将图像分割成垂直切片,然后将它们发送到客户端,以便使用 HTML 重新组装,然后再将其放入
WebView
中。事实上,它似乎工作得相当好。图形质量肯定更高,而且人们可以轻松阅读其中的文本。我们看到的唯一问题是平移和缩放的性能受到影响,由于我还不知道的原因,这种影响仅在 Nexus S 上非常糟糕。
在其他情况发生变化之前,我认为这可能是唯一的解决方案无需编写自定义视图控件即可解决问题。
We ended up solving this the hard way, by using the tiling method. We split the image up into vertical slices on our server, then send them down to be reassembled using HTML on the client before putting it into the
WebView
.It seems to work reasonably well, actually. The graphic is definitely higher quality, and one can easily read the text in it. The only issue we've seen is that there is a performance hit for panning and zooming that for reasons unknown to me (yet) is extremely bad only on the Nexus S.
Until something else changes, I think this may be the only solution to the problem without writing a custom view control.