web-dev-qa-db-fra.com

Android WebView, mise à l'échelle de l'image pour s'adapter à l'écran

Ce que j'ai: Je charge une image depuis une URL. Je fais simplement (WebView).loadUrl(imageurl, extraheaders) 

Ce que j'obtiens: L'image ne s'affiche pas sur toute la largeur de la WebView, elle est entièrement vide (comme si vous ouvriez un petit iamge dans le navigateur de votre ordinateur)

Ce que j'ai essayé: Réglage de LayoutAlgorithm sur SINGLE_COLUMN. Fonctionne parfaitement, mais le zoom ne fonctionne pas. (Je l’ai activé dans la WebView.getSettings() Ne sais pas pourquoi. Le réglage de setUseWideViewPort(true); charge l’image sans espace, mais le zoom est complet. 

androidandroid-webview
38
artouiros

J'ai eu le même problème et cela a bien fonctionné:

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

String data = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
data = data + "<body><center><img width=\""+width+"\" src=\""+url+"\" /></center></body></html>";
webView.loadData(data, "text/html", null);

Edit: Comme cela restait la réponse acceptée, voici une meilleure solution (tout le mérite revient à Tony ci-dessous):

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
42
Sebastian Breit

Vous pouvez aussi faire quelque chose comme ça.

Ajoutez un style CSS pour img au début (dépend du format de vos données Web) de votre chaîne de données.

<style>img{display: inline; height: auto; max-width: 100%;}</style>

Pour le faire rapidement aux données dans WebView, je l’ai fait.

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);

Cela ressemble beaucoup à ce que dit bansal21ankit, mais au lieu de cela, cela fonctionnera sur toutes les images de votre code HTML sans travail supplémentaire.

Modifier (précisions sur le contenu du message):

Vous pouvez avoir n'importe quelle valeur text/html au lieu de post.getContent() à partir de l'exemple.

Publier le contenu ici est juste un exemple de contenu text/html qui est chargé à partir d'une source de données, puis concaténé avec la partie style, qui permet à une image du contenu donné de s'adapter à l'écran.

79
Tony

vous devez adapter la vue Web à l’écran:

 WebView data = (WebView) getViewById(R.id.webview1);
 data.getSettings().setLoadWithOverviewMode(true);
 data.getSettings().setUseWideViewPort(true);
35
thepoosh

C'est un peu tard, mais j'espère que cela vous aidera. Ce que vous pouvez faire, c'est:

String html = "<html><body><img src=\"" + URL + "\" width=\"100%\" height=\"100%\"\"/></body></html>";
mWebView.loadData(html, "text/html", null);

cela rendra l'image exactement identique à la largeur de votre WebView. En reste, vous pouvez ajuster le WebView lui-même.

5
Ankit Bansal

Ce qui a fonctionné pour moi est la suivante: j'ai lu qu'afin de s'adapter à la largeur de l'écran, vous devez l'ajouter à votre code HTML ou XML à l'intérieur du champ:

width="100%"

Au lieu de redimensionner et d’agrandir les images, j’ai donc récupéré le fichier XML, l’a placé dans un StringBuilder, trouvé le code src = "https://blablabla.com/image.png" situé juste avant la sous-chaîne "src" j'ai inséré le "width =" 100% "", puis définissez mon webView avec le StringBuilder, le code mi est la suivante:

public void setWebViewWithImageFit(String content){

        // content is the content of the HTML or XML.
        String stringToAdd = "width=\"100%\" ";

        // Create a StringBuilder to insert string in the middle of content.
        StringBuilder sb = new StringBuilder(content);

        int i = 0;
        int cont = 0;

        // Check for the "src" substring, if it exists, take the index where 
        // it appears and insert the stringToAdd there, then increment a counter
        // because the string gets altered and you should sum the length of the inserted substring
        while(i != -1){
            i = content.indexOf("src", i + 1);
            if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
            ++cont;
        }

        // Set the webView with the StringBuilder: sb.toString()
        WebView detailWebView = (WebView) findViewById(R.id.web_view);
        detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}

J'espère que cela aide, il m'a fallu quelques heures pour comprendre comment résoudre ce problème.

5
Jesus Almaral

Code:

web = (WebView) findViewById(R.id.at_image_web);
web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setLoadWithOverviewMode(true);
web.loadUrl(linkImage);
3
hai than hoang

Ce travail pour moi: webView = (WebView) findViewById(R.id.webView); WebSettings webSettings = webView.getSettings(); webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

1
Jenkyn

Ce code fonctionne pour moi:

String strData = "<head>" + "<style>" + ".smal-video-pnl,.smal-video-thumb,.detail-hldr{margin-left: 0px;margin-right:0px;}" + "</style>" +
            "</head>" + mListItem.get(position).getTitbits();
holder.webViewStatus.loadDataWithBaseURL(null, strData, "text/html", "UTF-8", null);
0
user6829265

Je pense que cela va résoudre votre problème: -

      WebView web;

      web = (WebView) findViewById(R.id.webkit);
      web.setWebViewClient(new Callback());
      web.getSettings().setJavaScriptEnabled(true);
      web.getSettings().setLoadWithOverviewMode(true);
      web.getSettings().setUseWideViewPort(true);
      web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
      web.setScrollbarFadingEnabled(false);
0
user755278