web-dev-qa-db-ja.com

AndroidのWebViewは自動的に巨大な画像のサイズを変更できますか？

一部のWebブラウザーでは、巨大な画像が画面に合わせて自動的にサイズ変更されます。

Android WebViewで同じことをすることは可能ですか？

Webページには画像のみが含まれています。JavaScriptを追加するとうまくいくのではないでしょうか。
誰かがすでにこれを行っていますか？

注：画像のサイズは事前にわかりません。

androidimageresizewebview
30
Nicolas Raoul

はい、可能です。以下のコードを使用してWebViewレイアウトの設定を試すことができます。すべての画像のサイズを変更します（Device Screen Width）を画面の幅に合わせます。これは両方の向き（縦向きと横向き）で機能します

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

余白や余白を後で追加して、適切な間隔にすることができます。

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

動作しますが 非推奨 です。これは、CSSを使用して、LayoutAlgorithm.SINGLE_COLUMNを使用しない別のソリューションです。

@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>";
}
38
Yair Kukielka

画面の最大幅に合わせて、ブラウザで画像のサイズを変更できます。

<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>
15
Patrick de Kleijn

あなたはこれを使うことができます：

WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

この解決策はここにあります： Webviewの初期ズーム/幅を設定する方法

15
AndyB

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の場合も同じ方法です。

2
Dmitry Zaytsev

私は同じ問題に直面し、 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を追加

楽しんで！

1
Spipau

私のお気に入り ：

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);
0
Michael Assraf