studio programacion herramientas fundamentos con avanzado aplicaciones android image resize webview

programacion - manual de android en pdf



¿Puede WebView de Android cambiar automáticamente el tamaño de imágenes enormes? (7)

En algunos navegadores web, las imágenes enormes se redimensionan automáticamente para adaptarse a la pantalla.

¿Es posible hacer lo mismo en Android WebView?

La página web solo contiene la imagen, ¿tal vez agregar algo de JavaScript podría hacer el truco?
¿Alguien ya ha hecho esto?

Nota: no sé el tamaño de la imagen de antemano.


Mis favoritos :

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


Puede enviar el tamaño que desee en los parámetros de solicitud y dejar que el servidor configure el ancho / alto en el elemento img por usted.


Puede hacer que el navegador cambie el tamaño de la imagen para que se ajuste al ancho máximo de la pantalla:

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

También es posible cambiar el tamaño de su altura a la ventana gráfica de WebView:

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

Sin embargo, cambiar el tamaño del ancho y la altura daría como resultado una imagen estirada. Para cambiar el tamaño del ancho o alto dependiendo de qué lado se ajuste mejor, puedes considerar un poco de JavaScript, como este:

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



Si su ancho de WebView es fill_parent , puede usar este código:

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

¡Y el zoom sigue funcionando!

Mismo método si la height es fill_parent .


Si es posible. Puede probar configurando WebView usando el siguiente código. Cambia el tamaño de todas las imágenes (mayor que el Device Screen Width de la pantalla del Device Screen Width ) al Device Screen Width de la pantalla. Esto funciona para ambas orientaciones (vertical y horizontal)

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

Puede agregar márgenes extra / relleno más adelante para obtener el espaciado correcto.


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

funciona, pero está en deprecated . Esta es otra solución sin LayoutAlgorithm.SINGLE_COLUMN, usando 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>"; }