|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

277.- Pasar imagen a String y viceversa. Base 64 con Web Safe.

- Esta extensión trata de pasar una imagen a String y viceversa, esto puede servir por ejemplo para pasar una imagen mediante Bluetooth.

- Haremos una conversión de Image byte array a Base64 String y de Base64 String a Image byte array.

- Además de imagen podemos pasar a Base64 cualquier tipo de archivo: mp3, doc, pdf,...

_______________
1. Imagen a String.

p177_Extension_ImagenAString.aia

com.Imagen2String.aix

- Ponemos dos Botones, una Etiqueta y un componente de Imagen, además de la extensión.

- En Imagen2String ponemos una imagen que tengamos en nuestra tarjeta SdCard, en el ejemplo he puesto: /mnt/sdcard/LEDR.png

- Cuando pulsemos ese Botón, en la Etiqueta1 aparecerá los caracteres corresponiente a la imagen.

- Si ponemos otra dirección de imagen no existente, en el ejemplo: /mnt/sdcard/LEDRcopia.png

- Cuando pulsemos el Botón el contenido de la Etiqueta1 creará mediante StringAImagen la imagen LEDRcopia.png

---------------------------------------------------------------------------
- Ejemplos 2 y 3.

1.- p177i_Extension_File2String.aia

2.- p177i2_Extension_File2String.aia

3.- com.KIO4_File2String.aix

- NOTA: esta extensión codifica y decodifica al información en Web Safe, esto significa lo siguiente: si necesitáramos enviar la información textual mediante internet, algunos carácteres (+/=) serían problemáticos de enviar, así que la codificacion base 64 web safe, cambia esos caracteres a (-_*) para poder ser enviado el texto eficientemente. Además cuando lo recibe, esta extensión vuelve a cambiar esos caracteres (-_*) a (+/=), para que la información pueda ser recompuesta a la llegada.

Puedes ver más información sobre este tema en:

https://stackoverflow.com/questions/24460422/how-to-send-a-message-successfully-using-the-new-gmail-rest-api/24461102#24461102

Para probar las codificaciones String64 podemos consultar esta web:

https://www.base64decode.org/

_______________________________________________________
4.- Tomar una imagen, convertirla a String, enviarla por Internet a un servidor web y PHP. Guardar la imagen como texto en el servidor web. Bajar la imagen como texto y visualizarla en App Inventor. Guardar la imagen en el servidor web como foto.

p327C_subir_archivo_imagen_Base64.aia

com.KIO4_File2String.aix

- Como ves el título de este ejemplo es complicado, en resumen se trata de enviar una imagen convertida a String a un servidor web.

- Se puede enviar una imagen, un archivo de música, de texto,... aquí haremos la prueba con imágenes.

- Este ejemplo se complementa con otro visto en: http://kio4.com/appinventor/327B_subir_archivos_texto_php.htm

_______________
- Diseño.

_______________
- Bloques.

_______________
- Código PHP.

subir_archivo_texto_b64.php

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido); 
fclose($auxi);

echo $contenido;

$foto = 'foto.png';
$auxi = fopen($foto, 'w');
$contenido2 = strtr($contenido, '-_,', '+/=');
$contenido2 = base64_decode($contenido2);
fwrite($auxi, $contenido2); 
fclose($auxi);

?>

_______________
- Comentarios.

- Subo la imagen yoeat.png a la aplicación. Cuando estamos emulando con el Companion la imagen se encuentra en nuestra SdCard, concretamente en:

/mnt/sdcard/AppInventor/assets/yoeat.png

- Si instaláramos la aplicación la imagen se encontraría en /android_asset/yoeat.png

- La imagen puede estar en el asset de nuestra aplicación o en cualquier otro directorio de nuestra SdCard, por ejemplo: /mnt/sdcard/misfotos/yoeat.png

- Mediante el bloque File2String, tomamos la imagen /mnt/sdcard/AppInventor/assets/yoeat.png y la convertimos a Base 64 Web Safe, que sería la imagen convertida a texto.

- Cuando se ha realizado esa conversión, se activa el bloque GetString, en la variable string tenemos la imagen convertida a texto.

- Mediante el bloque Web.Url y un código PHP vamos a subir ese texto (string) a un servidor web, a la variable de subiada la llamaremos contenido.


	    $datos=$_POST;
$contenido=$datos['contenido'];
$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido);
fclose($auxi);

- El código PHP toma el contenido, y lo guarda en el servidor en un archivo llamado imagen.txt

- Ahí está la imagen convertida a texto.

- Además el código hace un echo y vuelve a devolver el imagen.txt al App Inventor.

- El App Inventor toma todo el texto recibido del imagen.txt y lo pone en la variable contenidoDeRespuesta.

- Ese contenidoDeRespuesta se decodifica para poder volver a ser código de imagen.

- Ese código de imagen se guarda como imagen en: /mnt/sdcard/fotokio.png

- Esa foto se carga en el componente Imagen.

-------------------------------------------------------------------

- El código PHP además de guardar el archivo.txt y de enviar el echo, convierte el texto recibido a imagen, concretamente a la imagen: foto.png

- Para hacer esa decodifiación de base64, previamente se han cambiado algunos caracteres:


	  $contenido2 = strtr($contenido, '-_,', '+/=');
      $contenido2 = base64_decode($contenido2);
	  

- Ya que la codificación que realizó el App Inventor con la extensión, modificó esos caracteres para poder ver enviado por web.

- La imagen legible como imagen la podemos ver en:

http://kio4.com/appinventor/php/foto.png

- En este ejemplo los nombres de los archivos siempre son los mismos, se podría hacer otro código PHP para que cada imagen se guardara con un nombre distinto.

- Aquí se ve cómo ha subido el texto del contenido y se ha convertido en imagen.txt, además se observa el archivo foto.png el cual responde como imagen normal, ya que le hemos cambiado los caracteres (-_*) a (+/=)

- Aquí tenemos otro código parecido al anterior, en este caso el código obtiene la extensión del archivo:

subir_archivo_texto_b64.php

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido); 
fclose($auxi);

echo $contenido;

$contenido2 = strtr($contenido, '-_,', '+/=');
$contenido2 = base64_decode($contenido2);
// Obtiene mime type
$tipo = finfo_open();
$mime_type = finfo_buffer($tipo, $contenido2, FILEINFO_MIME_TYPE);  // obtiene: image/png
$arr = explode("/", $mime_type, 2);
$extension = $arr[1]; // obtiene: png

// $foto = 'foto.png';
$foto = 'foto.'.$extension;
$auxi = fopen($foto, 'w');

fwrite($auxi, $contenido2); 
fclose($auxi);
?>

 

_______________________________________________________
5.- Tomar una imagen, convertirla a String, guardarla en una TinyDB. Obtener la imagen como texto y visualizarla en App Inventor como Imagen.

p327D_tinydb_archivo_imagen_Base64.aia

com.KIO4_File2String.aix

- No podemos guardar una imagen directamente en una TinyDB, podemos guardar un enlace a su imagen, por ejemplo http://kio4.com/imagenes/foto.png

- No podemos guardarlo directamente porque el archivo contiene caracteres no legibles por la TinyDB.

- Mediante este extensión convertiremos una imagen a String y guardaremos este en la TinyDB.

- Podemos recuperar ese String de la TinyDB, decodificarla a imagen, enviarla a un archivo y luego visualizar esa imagen en un componente de Imagen.

_______________
- Diseño.

_______________
- Bloques.

_______________
- Comentarios.

- Mediante el bloque File2String, pasamos el archivo a cadena de caracteres.

- Guardamos ese string en la TinyDB.

- Al pulsar el Botón2 lo recuperamos y presentamos la imagen en un componente de Imagen.

_______________________________________________________
6.- Mediante una extensión de Explorador elegimos un archivo de imagen, convertirla a String, guardarla en una TinyDB. Obtener la imagen como texto y visualizarla en App Inventor como Imagen.

p328F_imagen_tinydb_B64.aia

com.KIO4_File2String.aix

com.KIO4_Explorer.aix

- Utilizamos la extensión vista en: elegimos un archivo de imagen.

- Pulsamos el botón para mostrar el Explorador de archivos, creado mediante la extensión.

- Elegimos una imagen. Ponemos un Tag (Etiqueta) y la guardamos en la TinyDB.

- Si pulsamos el Botón de Obtener la imagen, ésta se mostrará en el componente de Imagen.

_______________
- Diseño.

_______________
- Bloques.

_______________________________________________________
7.- Mediante una extensión de Explorador elegimos un archivo de imagen. La subimos a un servidor web.

p328E_subir_archivo_B64.aia

com.KIO4_File2String.aix

com.KIO4_Explorer.aix

- Utilizamos la extensión vista en: elegimos un archivo de imagen.

- Pulsamos el botón de subir y es imagen subirá a nuestro servidor web mediante el código PHP visto anteriormente.

- La imagen subida la podemos ver en:

http://kio4.com/appinventor/php/foto.png

_______________
- Diseño.

_______________
- Bloques.

_______________
- Comentarios.

- Utilizo la extensión: com.KIO4_Explorer.aix

y: com.KIO4_File2String.aix

- Elegimos un archivo.

- Comprobamos si hemos elegido un archivo o un directorio, para eso comprobamos si la ruta elegida termina en "/", en este caso sería un directorio y no lo subimos.

- En caso que sea un archivo lo convertimos a String Base 64 Web Safe.

- Mediante el código PHP visto anteriormente lo subimos a nuestro servidor web.

- Podemos ver la imagen subida pulsando en: http://kio4.com/appinventor/php/foto.png

- Restricciones en este ejemplo:

1.- El archivo de imagen siempre se guarda con el mismo nombre. Puedes modificar el código PHP para que se guarde con el nombre propio del archivo.

2.- Mi directorio en el servidor web tiene restricción HotLink es decir solo puede ver la imagen desde esta página web, si pones ese enlace directamente o en otra página web no verás la imagen, te saldrá un mensaje de Forbidden, prohibido.

___________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información