Dopasowany obraz w przeglądarce WebView

Question

W mojej aplikacji wyświetlam zdjęcia dzięki webView. Tak więc dla każdego obrazu tworzę mały kod HTML, który ładuję za pomocą webView. Więc mój kod html składa się zasadniczo z tagu img (ze ścieżką do mojego obrazu).

Moje zdjęcia mają różne rozmiary, dlatego chciałbym ustawić mój zoom webView, aby dopasować szerokość obrazu do szerokości webView. Użytkownik nie musi powiększać ani pomniejszać widoku, aby zobaczyć cały obraz.

Czy istnieje sposób, aby to osiągnąć?

Dzięki.

Answer 1

Czy istnieje powód, dla którego używasz WebView, aby to osiągnąć? Dzięki ImageView możesz ustawić scaleType, aby dopasować obraz do rozmiaru ImageView.

Answer 2

To załatwiło sprawę dla mnie:

webView.setInitialScale(30); 
WebSettings webSettings = webView.getSettings(); 
webSettings.setUseWideViewPort(true); 

Answer 3

Można użyć trochę jQuery na stronie internetowej, aby osiągnąć równie dobrze.

Coś jak:

$(document).ready(function(){ 
    var windowWidth = $(window).width()+"px"; 
    $("#imagID").width(windowWidth); 
}); 

Answer 4

Jeśli creaing kod HTML (który można powiedzieć, że jesteś), można oszukać:

W kodzie html:

img src="xxx" width="100% > 

Answer 5

Znalazłem duszę.

użyj tego obliczenia.

urządzenie szerokości * (152/Gęstość)

pobierania urządzenia szerokości i gęstości za pomocą displayMetrics.widthPixels i displayMetrics.densityDpi

zestaw obliczono jako szerokość w znaczniku img

wartość 152 jest pierwotnie było 160, ale gdy 160 używane, wygląda na to, że obraz jest większy niż ekran.

Wynikiem jest, że obraz początkowo pasuje do ekranu, a powiększenie działa dobrze.

Answer 6

Czy istnieje powód, dla którego nie wystarczy użyć niektórych javascript, aby przekazać obrazy do aplikacji Android i wywołać niestandardowy dialog z obrazami w tym oknie dialogowym, aby skalować zgodnie z treścią.

Osobiście uważam, że to rozwiązanie jest bardziej eleganckie w stosunku do Państwa podejścia.

Answer 7

Co pracował dla mnie było to: Czytałem, że w celu dopasowania do szerokości ekranu należy dodać do kodu HTML lub XML wewnątrz pola:

width="100%" 

Więc co zrobiłem było, zamiast skalowania i powiększania obrazów, dostałem xml, umieściłem go w StringBuilderze, znalazłem src = "https://blablabla.com/image.png”, który jest w środku pola i tuż przed«src»podciąg włożeniu«width =»100%«», następnie y Ustaw moją Webview z StringBuilder, kod mi to:

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

Nadzieja ta Pomaga, zajęło mi to kilka godzin, aby dowiedzieć się, jak rozwiązać ten problem: