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

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

30 голосов
/ 23 июня 2010

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

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

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

Примечание. Размер изображения заранее неизвестен.

Ответы [ 8 ]

66 голосов
/ 08 сентября 2012

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

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

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

38 голосов
/ 25 ноября 2013 
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>";
}
15 голосов
/ 27 октября 2011

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

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

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

14 голосов
/ 03 декабря 2010

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

<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 голосов
/ 14 июня 2012

Если ваша 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 голос
/ 29 ноября 2018

Я столкнулся с той же проблемой и использовал Jsoup , чтобы выручить меня и добавить необходимый уважаемый CSS. Вы можете легко добавить атрибуты или CSS. В моем случае я загружаю из многих источников различные файлы HTML, сохраняю их и затем отображаю в веб-представлении. Вот как я анализирую HTML перед сохранением его в базу данных с Kotlin: 

// 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 в свой проект

Веселись!

0 голосов
/ 30 июня 2013

Мои любимые: 

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 голосов
/ 17 марта 2011

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

...