webentwicklung-frage-antwort-db.com.de

Kann Android's WebView die Größe großer Bilder automatisch ändern?

In einigen Webbrowsern wird die Größe großer Bilder automatisch an den Bildschirm angepasst.

Ist es möglich, dasselbe in einem Android WebView zu tun?

Die Webseite enthält nur das Bild. Vielleicht reicht es, wenn Sie JavaScript hinzufügen.
Hat das schon jemand gemacht?

Hinweis: Ich kenne die Größe des Bildes nicht im Voraus.

28
Nicolas Raoul

Ja es ist möglich. Sie können versuchen, das WebView-Layout mit dem folgenden Code festzulegen. Die Größe aller Bilder (größer als der Device Screen Width) wird an die Bildschirmbreite angepasst. Dies funktioniert für beide Orientierungen (Porträt und Landschaft)

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

Sie können später zusätzliche Ränder/Füllungen hinzufügen, um den Abstand richtig einzustellen.

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

funktioniert aber ist veraltet . Dies ist eine andere Lösung ohne LayoutAlgorithm.SINGLE_COLUMN, die CSS verwendet:

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

Sie könnten dies verwenden:

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

Diese Lösung hier gefunden: So legen Sie den anfänglichen Zoom/die Breite für eine Webansicht fest

14
AndyB

Sie können den Browser so einstellen, dass er das Bild an die maximale Bildschirmbreite anpasst:

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

Das Ändern der Höhe des Ansichtsfensters von WebView ist ebenfalls möglich:

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

Die Größenänderung von Breite und Höhe würde jedoch zu einem gestreckten Bild führen. Um entweder die Breite oder Höhe zu verändern, je nachdem, welche Seite am besten passt, sollten Sie ein bisschen JavaScript in Betracht ziehen, beispielsweise:

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

Wenn Ihre WebView Breite fill_parent ist, können Sie diesen Code verwenden:

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

Und Zoom noch funktioniert!

Gleiche Methode, wenn heightfill_parent ist.

2
Dmitry Zaytsev

Ich hatte das gleiche Problem und benutzte Jsoup , um mir zu helfen und die erforderliche respektierte CSS hinzuzufügen. Sie können einfach Attribute hinzufügen oder CSS. In meinem Fall lade ich verschiedene HTML-Dateien aus vielen Quellen herunter, speichere sie und zeige sie in einem Webview an. So parse ich den HTML-Code, bevor ich ihn mit Kotlin in der Datenbank speichere:

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

Füge Jsoup deinem Projekt hinzu

Habe Spaß!

1
Spipau

Meine Favoriten :

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