Может ли Android WebView автоматически изменять размеры огромных изображений?

В некоторых веб-браузерах огромные изображения автоматически изменяются в соответствии с разрешением экрана.

Можно ли сделать то же самое в Android WebView?

Веб-страница просто содержит изображение, возможно, добавление некоторых JavaScript может сделать трюк?
Кто-нибудь уже это сделал?

Примечание. Я заранее не знаю размер изображения.

Ответы

Ответ 1

Да, это возможно. Вы можете попробовать настроить макет WebView с помощью кода ниже. Он изменяет размеры всех изображений (больше, чем Device Screen Width) на ширину экрана. Это работает как для Ориентации (Портрет и Пейзаж)

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

Вы можете добавить дополнительные поля/дополнение позже, чтобы получить интервал справа.

Ответ 2

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>";
}

Ответ 3

Вы можете изменить размер изображения в обозревателе для максимальной ширины экрана:

<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>

Ответ 4

Вы можете использовать это:

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

Нашел это решение здесь: Как установить начальный масштаб/ширину для веб-сайта

Ответ 5

Если ваша ширина 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.

Ответ 6

Мой любимый:

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);

Ответ 7

Вы можете отправить нужный размер в параметрах запроса и позволить серверу установить ширину/высоту в элементе img для вас.