web-dev-qa-db-fra.com

WebView peut-il redimensionner automatiquement des images énormes?

Dans certains navigateurs Web, les images de grande taille sont automatiquement redimensionnées pour s’ajuster à l’écran.

Est-il possible de faire la même chose dans une WebView Android?

La page Web ne contient que l'image. Peut-être que l'ajout de JavaScript pourrait faire l'affaire?
Quelqu'un a déjà fait ça?

Remarque: je ne connais pas la taille de l'image à l'avance.

androidimageresizewebview
28
Nicolas Raoul

Oui c'est possible. Vous pouvez essayer de définir la disposition WebView en utilisant le code ci-dessous. Il redimensionne toutes les images (supérieures au Device Screen Width) à la largeur de l'écran. Cela fonctionne pour les deux orientations (portrait et paysage)

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

Vous pouvez ajouter des marges supplémentaires/un remplissage plus tard pour obtenir un espacement correct.

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

fonctionne mais est obsolète . C'est une autre solution sans LayoutAlgorithm.SINGLE_COLUMN, utilisant 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>";
}
36
Yair Kukielka

Vous pouvez utiliser ceci:

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

Vous avez trouvé cette solution ici: Comment définir le zoom/largeur initial pour une vue Web

14
AndyB

Le navigateur peut redimensionner l’image pour s’adapter à la largeur maximale de l’écran:

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

Redimensionner sa hauteur dans la fenêtre WebView est également possible:

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

Cependant, le redimensionnement de la largeur et de la hauteur entraînerait une image étirée. Pour redimensionner la largeur ou la hauteur en fonction du côté qui convient le mieux, vous pouvez envisager un peu de JavaScript, comme ceci:

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

Si votre WebView width est fill_parent, vous pouvez utiliser ce code:

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

Et zoom fonctionne toujours!

Même méthode si height est fill_parent.

2
Dmitry Zaytsev

J'ai fait face au même problème et utilisé Jsoup pour m'aider et ajouter le code CSS respecté requis. Vous pouvez facilement ajouter des attributs ou CSS. Dans mon cas, je télécharge depuis de nombreuses sources divers fichiers HTML, je les enregistre, puis je les affiche dans une vue Web. Voici comment j'analyse le code HTML avant de l'enregistrer dans la base de données avec 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

Ajouter Jsoup à votre projet

S'amuser!

1
Spipau

Mes favoris :

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