Spanish Mostrar una imagen web en un webview

[jvrh_1]

Buenos días, a ver si hay alguien que me pueda ayudar.
Necesito cargar en un webview una imagen de mi web. El caso es que la imagen es bastante más grande que mi webview y solo se ve en el webview la esquinita de la imagen. ¿Sabéis cómo puedo hacer que la imagen se vea entera en mi webview? No puedo descargar las imágenes ya que son muchas y acabarían saturando la app. Necesitaría cargarlas sin descargar en local.
Tampoco me importaría cargarlas en un imageview ya que no necesito las funciones de zoom ni de desplazar .
Muchas gracias. A ver si consigo desatascarme.

 

[drgottjr]

2 problemas: cabida y tamaño
2 estrategias: web o app

estrategia web: la cabida
si el ancho de la imagen esté más grande que el de la página web, la
cabes dentro de la vista de la página mediante el comando
width='100%' dentro de la etiqueta html <img>. pero esto seguro
que ya lo sabías. igual podrías usar css.

en cuanto al tamaño de la imagen, no hay manera de reducir el tamaño
en un webview. o sea, hay manera de hacer que quepa la imagen
(dentro de los límites de la memoria del aparato), pero sin tocar al
tamaño.

dices que la web es tuya, pero no dices si el server lo es también,
pues en este caso podrías servir versiones
reducidas de las imagenes. también podrías reducir las imagenes
antes de subirlas a tu web.

estrategia app:
he aquí 3 vínculos referentes a la descarga de imagenes grandes:

https://www.b4x.com/android/forum/t...h-additionaljar-and-javaobject-picasso.40904/

https://developer.android.com/topic/performance/graphics/load-bitmap

https://www.b4x.com/android/forum/threads/picasso-image-downloading-and-caching-library.31495/

los he visto de paso en su momento. el primero puede que sea el más facil. total, con java parece que es posible descargar
una versión reducida sobre la marcha. creo que la librería "picasso" de google, utiliza un método para descargar imagenes
grandes así. pero sería para un imageview, no un webview.

 

[jvrh_1]

La verdad es que la app es bastante sencilla.
Hace una foto con el movil. La sube a mi dominio (creo que no es un servidor propio, si no una cuenta de hostinger en la que te dan alojamiento web, bd mysql...). Después, todas esas imágenes se muestran en una lista o en un conjunto de paneles. Digamos que como un álbum de fotos digital.
Al subir la foto al servidor lo hago con OkHttpRequest. Cuando subo la imágen la intento reducir con esta subrrutina:

Dim BMP As Bitmap
BMP.Initialize(File.Dirinternal ,NOMBREFOTO)
Dim Out As OutputStream = File.OpenOutput(File.Dirinternal ,NOMBREFOTO, False)
BMP.WriteToStream(Out, 50, "JPEG")
Out.Close

Esas mismas imágenes, las puedo descargar y mostrarlas en un webview, pero ¿no puedo hacerlo online?

P.D: Muchas gracias por tu ayuda.

 

[drgottjr]

has revelado unos cuantos detalles más, pero todavía no se sabe qué
va a hacer el usuario al ver el álbum. ?sólo mirar? ?seleccionar y descargar?

si el usuario puede seleccionar una foto para descargar, tu app tiene que subir 2
fotos por cada una sacada: la original y una versión muy reducida. si el usuario
sólo puede ver las fotos, entonces la app sube una versión reducida.

no hay porqué no se podrá ver el album en un webview. al fin y al cabo, es un mini browser.

yo recomendaría loadbitmapresize() en lugar del metodo que usas actualmente.
te quedas con un ancho de 200-300pixels máximos. y guardando la relación de aspecto.

supongo que puedes encargarte de los detalles. un poco de organización y ya
está.

cuando vas a google images para mirar un álbum de fotos, son versiones muy
reducidas de las originales. si no, la página no se terminaría de cargarse.

 

[drgottjr]

a proposito, si queria ver tu web, qué url le pongo? es para verla en un webview. gracias.

 

[Don Oso]

Lo que haria yo es crear una pagina con Boostrap y ahi controlar los tamaños via CSS y html , luego mostraria la pagina web en el webview ( para eso es)

Saludos

 

[jvrh_1]

a proposito, si queria ver tu web, qué url le pongo? es para verla en un webview. gracias.

Ok,

Os agradezco enormemente la atención y el tiempo que me estáis prestando y perdón por mi ignorancia en algunos temas.

Asumo entonces que no hay forma de mostrar una imagen alojada en un servidor web a través de un simple webview y que esta quede ajustada al webview. O al menos no con mis conocimientos (bastante justos, estoy empezando).
La imagen no está en una página web en si, si no alojada en un servidor (accessible desde ftp o desde el navegador).
La dirección de la imagen es esta: http://www.jrh2.tech/fotos/1/FOTO1.JPG
Y el propósito es solo ver en un pequeño webview la foto en miniatura (un preliminar). Así que podría ser un imageview perfectamente. Este imageview o webview sería de un tamaño muy reducido (1/4 de la pantalla aprox).
¿Podríais decirme alguna forma de reducir la imagen de una forma efectiva a través de mi propia app antes de subirla?. De este modo si que podría descargarla (al pesar mucho menos). Ahora mismo las imágenes que subo ocupan cerca de 800-900k y claro, bajar gran cantidad de ellas supondría un tráfico enorme además de espacio.
Ahora mismo estoy usando esta rutina que encontré en el foro y consigo reducirla algo, pero aún así queda grande. He bajado la cifra de 50 pero no logro nada.

Dim BMP As Bitmap
BMP.Initialize(File.Dirinternal ,NOMBREFOTO)
Dim Out As OutputStream = File.OpenOutput(File.Dirinternal ,NOMBREFOTO, False)
BMP.WriteToStream(Out, 50, "JPEG")
Out.Close

¿Podrías ponerme un ejemplo con el loadbitmapresize() que me comentas? Con esto podría reducir la imagen antes de subirla?. La idea sería hacer la foto y guardarla como temporal, luego que la app haga una copia reducida de ella, subir la versión reducida y borrar la original (la grande).

He encontrado algunas informaciones en el foro pero o bien no las entiendo del todo (java) o no soy capaz de ponerla en práctica sin ver ejemplos.

Muchísimas gracias. Un saludo.

 

[josejad]

Hola:

¿Has probado este ejemplo?
https://www.b4x.com/android/forum/threads/b4x-use-webview-to-show-large-images.102910/

Creo que hay otro de otro usuario pero no lo encuentro ahora mismo, que estoy con el móvil.

saludos,

 

[jvrh_1]

Si lo probé. Pero es para cargar imágenes locales en webview. Al inicio pretendía cargarlas desde la web. Este código me vale (de hecho lo uso) para hacer la vista previa de la foto.
Ahora que tengo claro que tengo que cargar la imagen desde un archivo local, lo que necesitaría sería reducir la imagen para subirla a mí hosting
Muchas gracias.

 

[drgottjr]

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim thumb As Bitmap
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    thumb = LoadBitmapResize(File.DirAssets,"FOTO1.jpeg",400, 400,True)
    Log( thumb.Width & " x " & thumb.Height)
    Dim imageview As ImageView
    imageview.Initialize("iv")
    Activity.AddView(imageview,0%x,0%y,100%x,100%y)
    imageview.SetBackgroundImage( thumb )
    imageview.Gravity = Gravity.center
   
End Sub

 

[josejad]

Ahora que tengo claro que tengo que cargar la imagen desde un archivo loca

También la puedes cargar directamente desde la web:

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim Webview1 As WebView
    Dim xui As XUI
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    ShowImage
End Sub

Private Sub ShowImage()
    Webview1.Initialize("")
   #if B4A
    Dim jo As JavaObject = Me
    jo.RunMethod("zoom", Array(Webview1))
   #End If
    Webview1.LoadHtml($"<img src="http://www.jrh2.tech/fotos/1/FOTO1.JPG"/>"$) 'xui is a global XUI object.
    Activity.AddView(Webview1,0%x,0%y,100%x,100%y)
#if Java
public static void zoom(android.webkit.WebView wv) {
   wv.getSettings().setUseWideViewPort(true);
   wv.setInitialScale(1);
}
#End If
End Sub

 

[jvrh_1]

También la puedes cargar directamente desde la web:

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim Webview1 As WebView
    Dim xui As XUI
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    ShowImage
End Sub

Private Sub ShowImage()
    Webview1.Initialize("")
   #if B4A
    Dim jo As JavaObject = Me
    jo.RunMethod("zoom", Array(Webview1))
   #End If
    Webview1.LoadHtml($"<img src="http://www.jrh2.tech/fotos/1/FOTO1.JPG"/>"$) 'xui is a global XUI object.
    Activity.AddView(Webview1,0%x,0%y,100%x,100%y)
#if Java
public static void zoom(android.webkit.WebView wv) {
   wv.getSettings().setUseWideViewPort(true);
   wv.setInitialScale(1);
}
#End If
End Sub

¡¡¡¡Estupendo!!!

Funciona. Puedo mostrar en mi webview la foto sin necesidad de estar descargando las imágenes. Justo lo que buscaba. Eternamente agradecido.
Ahora tengo un problema menor: La imagen no se centra en el webview, sino que se muestra en una esquina. He encontrado este fragmento de código y lo he probado:

Webview.LoadHtml("<html><head><style Type=""text/css""> img { position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; }</style> </head> <body> <img src=""http://www.jrh2.tech/fotos/2/FOTO1""> </body> </html>")

El problema es que lo centra pero la imagen de dentro del webview se queda diminuta. Supongo que cambiando los parámetros de width y height al alto de mi imagen original, quedaría totalmente relleno el webview (aunque distorsione algo). El problema es que no hay forma de obtener el ancho y el alto de mi imagen. ¿Hay alguna función que averigüe el ancho y el alto de una imagen cargada dentro de un webview o bien tendría que guardar ese valor en algún sitio antes de subir la imagen y luego usarlo?

Pero vamos... me habéis salvado este atascón que tenía y me ha dado un empujón para seguir. Muchas gracias a los tres...José, Don Oso y Drgottjr

 

[jvrh_1]

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim thumb As Bitmap
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    thumb = LoadBitmapResize(File.DirAssets,"FOTO1.jpeg",400, 400,True)
    Log( thumb.Width & " x " & thumb.Height)
    Dim imageview As ImageView
    imageview.Initialize("iv")
    Activity.AddView(imageview,0%x,0%y,100%x,100%y)
    imageview.SetBackgroundImage( thumb )
    imageview.Gravity = Gravity.center
 
End Sub

Entiendo que esto es para cargar la imagen desde un archivo en local (DirAssets). Cambiaré todas las imágenes que muestro en la app a este formato, mucho más apropiado. Sin embargo no sirve para reducir una imagen "copia" de la que saque en versión reducida (miniatura) para luego subirla al hosting, ya que no genera ningún fichero ¿no?. La verdad es que estoy un poco perdido en este asunto. Siento haceros perder el tiempo. Muchísimas gracias por vuestra ayuda... de hecho ya he dado un gran paso gracias a vosotros.

 

[josejad]

Digamos que como un álbum de fotos digital.

Y digo yo, ¿has probado estas soluciones?

https://www.b4x.com/android/forum/threads/b4xtable-photos-album.103343/#post-647644
https://www.b4x.com/android/forum/t...r-columns-of-imageviews-and-many-rows.101431/

 

[jvrh_1]

La primera la estudié en su día. La segunda no la había visto. Pero en todo caso, cargan imágenes en imageviews con fichero locales. En eso no tengo problema. El asunto era hacerlo con imágenes que subo al hosting, porque así puedo acceder a imágenes que haya colgado otro usuario desde su propia app.

 

[jvrh_1]

Ok. Por fin encontré la solución aunque después de dar muchas vueltas...
Antes de subir la imagen tengo que guardar las dimensiones de la imagen original y de ahí saco una proporción entre el alto y el ancho de la imagen original.
Después creo un webview que respete ese ratio y listo. Imágenes cargadas directamente desde mi web, sin distorsión, ajustadas al webview y centradas. Método rudimentario y caserete pero muy eficaz.
Gracias a todos por vuestras ideas. Un abrazo.

 

[josejad]

Genial¡¡
Si pones tu código, podría ser de utilidad para otros usuarios cuando vean este hilo.

saludos¡