logo标签列表

安卓的WebView能否自动调整巨大图片的大小？

androidimageresizewebview
31
在一些网页浏览器中，巨大的图片会自动调整大小以适应屏幕。
在Android WebView中是否也可以实现相同效果？
该网页只包含图片，可能添加一些JavaScript可以解决问题吗？ 已经有人这样做过吗？
注意：我事先不知道图片的大小。
8个回答
68

是的，这是可能的。您可以尝试使用以下代码设置WebView布局。它会将所有大于设备屏幕宽度的图像调整大小为屏幕宽度。这适用于横向和纵向两种方向。

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

您稍后可以添加额外的边距/填充以获得正确的间距。

2
已测试通过2.2.1、3.2和4.0.3版本。minSdkVersion="8" targetSdkVersion="15"以及android-support-v4.jar。非常简单而且有效！ - Ruben
4
我喜欢这个解决方案，但我发现 SINGLE COLUMN 已经被弃用了。如果有人知道为什么，请指出来。 - m039
2
@m039 - SINGLE_COLUMN已经被弃用，但如果不使用CSS，这是唯一的方法。就YouTube视频而言，在我的设备上它们工作正常。（在Nexus 7（4.1）和Galaxy Nexus（4.0、4.1、4.2）上测试过）。 - Sheharyar
1
对我来说它不起作用.. :( 这是我的代码。wv.loadUrl("file://" + imageFile); wv.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);我也尝试过在 setLayoutAlgorithm() 之后使用 loadUrl()。 - M. Usman Khan
5
所以.. Android 4.4通过停用LayoutAlgorithm.SINGLE_COLUMN功能导致此问题。有人找到了替代方案吗？ - Brayden
显示剩余8条评论
42
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

这个方法可以工作，但已经废弃。这是一种不需要使用LayoutAlgorithm.SINGLE_COLUMN的另一种解决方案，使用CSS：

@SuppressLint("NewApi")
private openWebView() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);
    } else {
        webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
    }
    String data = "<div> your HTML content </div>";
    webView.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null);
}

private String getHtmlData(String bodyHTML) {
    String head = "<head><style>img{max-width: 100%; width:auto; height: auto;}</style></head>";
    return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
}
2
+1 的确，LayoutAlgorithm.SINGLE_COLUMN 似乎已经被弃用了，因此 Sheharyar 的解决方案变得不那么吸引人了... - Nicolas Raoul
太棒了！谢谢！ - Denys Vasylenko
3
额外添加一个具有自动宽度/高度的CSS行就可以在5.0 Lollipop上达到神奇的效果。 - lini sax
1
最佳解决方案..非常好用，谢谢.. :) 但是我在YouTube链接上也遇到了困难..这段代码对于图像和文本效果最佳，但无法更改YouTube链接的宽度..你能帮我吗？ - Reshma
1
这个可以。我添加了 webview_image.settings.builtInZoomControls = true 以允许用户进行缩放。 - Aphex
显示剩余2条评论
20
你可以使用这个：
WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

在这里找到了解决方案： 如何为WebView设置初始缩放/宽度

1
现在这个可以工作了，因为之前的选项已经被弃用并且不再起作用。 - Raveen Beemsingh
15

您可以让浏览器自动调整图像大小以适应屏幕的最大宽度：

<img src="huge-image.jpg" width="100%" />

将其高度调整为 WebView 视口的大小也是可能的:

<img src="huge-image.jpg" height="100%" />

然而，同时调整宽度和高度会导致图像被拉伸。如果想要根据最适合的一边调整宽度或高度，则可以考虑使用一些JavaScript，例如：

<img src="huge-image.jpg" onload="resize(this);" />


<script type="text/javascript">

    function resize(image)
    {
        var differenceHeight = document.body.clientHeight - image.clientHeight;
        var differenceWidth  = document.body.clientWidth  - image.clientWidth;
        if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
        if (differenceWidth  < 0) differenceWidth  = differenceWidth * -1;

        if (differenceHeight > differenceWidth)
        {
            image.style['height'] = document.body.clientHeight + 'px';
        }
        else
        {
            image.style['width'] = document.body.clientWidth + 'px';
        }

        // Optional: remove margins or compensate for offset.
        image.style['margin'] = 0;
        document.body.style['margin'] = 0;
    }

</script>
2
这个很好用，但它会破坏缩放功能。你知道有什么解决方法吗？ - Manfred Moser
2
如果你只调整宽度，高度将按比例调整。 - Dan Dascalescu
3

我曾经遇到过同样的问题，使用了Jsoup来帮助我添加所需的CSS。你可以轻松地添加属性或CSS。在我的情况下，我从许多不同的来源下载各种HTML文件，保存它们，然后在Webview中显示它们。以下是我在使用Kotlin将HTML解析并保存到数据库之前的方法：

// Parse your HTML file or String with Jsoup
val doc = Jsoup.parse("<html>MY HTML STRING</html>")

// doc.select selects all tags in the the HTML document
doc.select("img").attr("width", "100%") // find all images and set with to 100%
doc.select("figure").attr("style", "width: 80%") // find all figures and set with to 80%
doc.select("iframe").attr("style", "width: 100%") // find all iframes and set with to 100%
// add more attributes or CSS to other HTML tags

val updatedHTMLString = doc.html()
// save to database or load it in your WebView

将Jsoup添加到您的项目中

玩的开心！

2
如果您的WebView宽度是fill_parent，则可以使用以下代码：
Display display=getWindowManager().getDefaultDisplay();
int width=display.getWidth();
String data="<img src='http://example.com/image.jpg' style='width:"+width+"px' />";
webView.loadData(data, "text/html", "utf-8");

并且缩放仍在工作！

如果height是fill_parent，则使用相同的方法。

1
@NicolasRaoul 我已在Android 4.0.3上进行了测试 - 比例相同。 - Dmitry Zaytsev
有趣，我得试试！ - Nicolas Raoul
0

我的最爱：

String data = "<html><body ><img id=\"resizeImage\" src=\""+PictureURL+"\" width=\"100%\" alt=\"\" align=\"middle\" /></body></html>";  
webview.loadData(data, "text/html; charset=UTF-8", null);
-1
你可以在请求参数中发送所需的尺寸，让服务器为你设置img元素的宽度/高度。
问题在于我不知道图像的尺寸。 - Nicolas Raoul
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接