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.
Colabora en el mantenimiento de esta web.
- Si te gusta este sitio web y te resulta útil esta aplicación, puedes donar unos 7€ o 7$ mediante este enlace de Paypal:
|
_______________
1.- Ejemplo Actualizado. Setiembre 2021.
p177_Extension_File2String_TinyDB_2.aia
com.KIO4_Base64.aix (Updated September 2021)
- Si vas a utilizar esta extensión en versiones de Android igual a 10 o superiores, debes utilizar los bloques que contengan "ASD", el directorio BASE es:
/storage/emulated/0/Android/data/<namepackage>/files
es decir, si en el bloque CreateDirectoryASD escribes: /my_directory, éste se creará en /storage/emulated/0/Android/data/<namepackage>/files/my_directory
- Si vas a utilizar esta extensión en versiones de Android 9 o inferiores, puedes utilizar los bloques que contengan "ASD" como he indicado anteriormente, además puedes utilizar los bloques que no contienen "ASD", es este caso el directorio BASE es:
/mnt/sdcard
es decir, si en el bloque CreateDirectory escribes: /my_directory, éste se creará en /mnt/sdcard/my_directory
- Esta extensión también contiene los bloques GetApi y GetSdkCodeName, con estos bloques puedes comprobar la versión de Android que tiene instalado el dispositivo.
---------------------------------------------------------------------------
---------------------------------------------------------------------------
0. - Tomar foto con la cámara pasar la imagen a string Base 64. Guardarla en TinyDB. Obtener de TinyDB, pasar el string a archivo y visualizarlo en un componente imagen.
Base64_Direct_TinyDB_2.aia
1.- Tomamos una foto con la cámara. Obtenemos el archivo imagen.
2.- Mediante FileToStringDirect, convierte la imagen en string Base64 y guardamos ese string en una TinyDB, el tag será el nombredelarchivo.
3.- Una vez guardado el string en la TinyDB, borramos el archivo imagen de su ubicación:
/storage/emulated/0/Pictures/app_inventor_1844444444.jpg [Android menores que 10] [API <29]
/storage/emulated/0/Android/data/<namepackage>/files/Pictures/app_inventor_1844444444.jpg [Android mayores o igual que 10]
4.- Mediante el bloque StringToFileASDDirect, tomamos el contenido de la TinyDB, es decir el string y lo copiamos en un archivo en ASD, /1844444444.jpg
5.- El archivo estará en /storage/emulated/0/Android/data/<namepackage>/files/1844444444.jpg
6.- Ese archivo lo mostramos en el componente Imagen.
7.- Ese archivo se borra de su ubicación mediante el bloque DeleteFile.
8.- Se comprueba que se ha borrado mediante el bloque FileExists.
- El código debe funcionar con todas las versiones de Android.
- Con la versión 11 puede dar el error
Generates a 908 WRITE_EXTERNAL_STORAGE permission error (denied)
_______________________________________________________________________________
- En el asset hay varios archivos: imagen.png, foto.jpg y despacito.mp3
- Codificamos alguno de ellos a String Base64 mediante el bloque: FileToString.
- Guardamos ese String Base64 en la TinyDB con su correspondiente etiqueta.
- Al pulsa el btn_GetValue, obtenemos desde la TinyDB el String Base64 correspondiente a ese archivo.
- Descodificamos ese String Base64 y lo guardamos en un archivo auxiliar en la SdCard, concretamente: /mnt/sdcard/aux_file
- Observa que no hace falta ponerle extensión al aux_file, vale para archivos de imágenes y sonidos
- Ese archivo auxiliar /mnt/sdcard/aux_file lo ponemos en un componente de imagen o reproductor de sonido, mediante esta direción:
file://mnt/sdcard/aux_file
- Si el archivo está en el asset ponemos fileName: //mifoto.jpg
- Si el archivo está en la sdcard ponemos fileName: /mifoto.jpg
_____________________________________________
- Tutorial en el foro de App Inventor. Community:
https://community.appinventor.mit.edu/t/upload-file-to-server-hosting-by-php-encode-file-to-base-64-extension/7445
_______________
- Diseño.
_______________
- Bloques.
- Si el archivo está en el asset ponemos fileName: //mifoto.jpg
- Si el archivo está en la sdcard ponemos fileName: /mifoto.jpg
---------------------------------------------------------------------------
---------------------------------------------------------------------------
2. - Guardar archivos de imagen grandes en la TinyDB.
p177_Extension_File2String_TinyDB_grandes.aia
- Creamos en nuestro móvil la carpeta /mnt/sdcard/fotos_grandes
- Y en ella ponemos archivos .jpg de gran tamaño, por ejemplo estos:
- Al pulsar el btn_StoreValue, se guardarán todos los archivos en la TinyDB.
- Al pulsar continuamente el btn_GetValue, se irá mostrando las imágenes guardadas en la TinyDB en el componente de imagen.
_______________
- Diseño.
_______________
- Bloques.
---------------------------------------------------------------------------
---------------------------------------------------------------------------
3. - Bajar archivo de imagen de Internet y Guardarlo en la TinyDB.
p177_Extension_File2String_TinyDB_internet.aia
1.- Crea el directorio /auxiliar (en /mnt/sdcard/auxiliar)
2.- Baja de Internet un archivo grande de imagen (5 MB) mediante el componente Web, lo guarda en: auxiliar/mydowloadfile.jpg.
3.- Mdeiante el bloque FilteToString conviert el archivo a String.
4.- Guarda ese String en la TinyDB con la etiqueta : mi_string
----- Recuparación -----------
5.- Obtiene el String de la TinyDB con la etiqueta: mi_string
y lo convierte a archivo mediante el bloque: StringToFile y lo guarad en /auxiliar/mynewfile.jpg
6.- Muestra la imagen mediante: file:///mnt/sdcard/auxiliar/mynewfile.jpg
7.-Borra el directorio /auxiliar
______________________________________________________________
Sitio para bajar imágenes de muestras:
https://sample-videos.com/download-sample-jpg-image.php
Sitio para bajar vídeos de muestras:
https://sample-videos.com/
_______________
- Diseño.
_______________
- Bloques.
---------------------------------------------------------------------------
- Más Ejemplos:
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);
?>
|
- Código similar:
- El archivo de imagen está en el assets (en la aplicación).
upload_b64.php
|
<?php
// Juan A. Villalpando
// kio4.com
$datos=$_POST;
$contenido=$datos['contenido'];
$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( "dibujo.jpg", "wb" );
fwrite( $ifp, $plainText );
fclose( $ifp );
echo "Creo que ha subido";
?>
|
- Estableciendo el nombre del archivo:
upload_b64_2.php
|
<?php
// Juan A. Villalpando
// kio4.com
// https://kio4.000webhostapp.com/xxxxxxxxx.xxx
$datos=$_POST;
$contenido=$datos['contenido'];
$nombre=$datos['nombre'];
$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( $nombre, "wb" );
fwrite( $ifp, $plainText );
fclose( $ifp );
echo "Creo que ha subido";
?>
|
_______________________________________________________
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.
_______________________________________________________
8.- Tomar una foto mediante la Cámara. Guardarla en una TinyDB.
p328E_foto_TinyDB.aia
1.- Tomamos una foto con el componente Cámara.
2.- Escribiemos un tag (Etiqueta) y un comentario.
3.- El comentario se guardará en la TinyDB1
4.- Mediante la extensión se convierte la Foto en String Base64 y ese String se guarda en la TinyDB2
5.- Observa Namespace en las Propiedades de la TinyDB1 y la TinyDB2.
- Para ver la foto.
6.- Escribe el tag (Etiqueta) anterior y pulsa el botón para obtener la foto y el comentario.
7.- Se obtendrá el String de TinyDB2 y se convertirá a archivo en /auxiliary_dir/auxiliary_file
8.- Se mostrará file:///mnt/sdcard/auxiliary_dir/auxiliary_file en el componente Imagen2
_______________
- Diseño.
- Observa Namespace en las Propiedades de las TinyDB
_______________
- Bloques.
_______________________________________________________
9.- Elegir la foto de la Galería de imágenes. Guardarla en una TinyDB.
- Este ejemplo es similar al anterior, en este caso elegimos la foto de la Galería de imágenes mediante el componente SelectorDeImágenes (está en la parte de Medios), en inglés: ImagePicker.
p328E2_foto_TinyDB.aia
_______________
- Bloques.
_______________________________________________________
10.- Guardar y recuperar una imagen de la SdCard en CloudDB.
p328E2_imagen_CloudDB.aia
- Tenemos una imagen en la SdCard, en mi caso marcianos.png (399 KB), lo queremos subir a CloudDB acompañado de un texto.
- Convertimos la imagen a String mediante Base64 y subimos ese texto a CloudDB. También subimos un comentario de esa foto.
- Al pulsar el Botón "Get from CloudDB", bajamos ese texto desde CloudDB, lo convertimos a archivo mediante Base64 y guardamos ese archivo en la SdCard con el nombre My_Martians.png, además mostramos el texto en la Etiqueta. Mediante el componente imagen mostramos esa imagen.
- De todos modos, para subir el archivo a CloudDB no es necesario pasarlo a Base 64, sube bien directamente como archivo.
_______________
- Diseño.
_______________
- Bloques.
_______________________________________________________
11.- Grabar voz. Convertir archivo a Base 64. Subir a CloudDB. Bajar String Base 64, convertirlo a archivo de sonido y Reproducirlo.
p328E2_Sonido_Base64_CloudDB.aia
- Grabamos un mensaje de voz mediante el GrabadorDeSonidos. Lo convertimos a Base 64, lo guardamos en un archivo y lo subimos a CloudDB.
- Obtenemos el String de CloudDB, lo pasamos a archivo y Reproducimos ese archivo.
- De todos modos, para subir el archivo a CloudDB no es necesario pasarlo a Base 64, sube bien directamente como archivo.
_______________
- Diseño.
_______________
- Bloques.
_______________________________________________________
12.- Archivo en asset. Lo convertimos en string Base64. Ese string lo copiamos como archivo en ASD. Lo subimos a web PHP. Se muestra página web con la imagen.
p327C_subir_archivo_imagen_Base64_ASD.aia
- Convierte el archivo gato.png que se encuentra en el asset, a string.
- Y muestra ese string en la Etiqueta: lbl_String.
- Convierte ese string a archivo y lo llama: this_is_a_cat.png
- además ese archivo lo guarda en ASD, es decir:
/storage/emulated/0/Android/data/<namepackage>/files/this_is_a_cat.png
- Subimos ese archivo a un servidor web con PHP, en realidad se subre su string Base 64.
- El código PHP convierte ese string a un archivo de nombre: dibujo.png
- Mediante un VisorWeb vemos ese dibujo insertado en una página web.
_______________
- Diseño.
_______________
- Bloques.
_______________
- Código PHP.
upload_b64.php
|
<?php
// Juan A. Villalpando
// kio4.com
$datos=$_POST;
$contenido=$datos['contenido'];
$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( "dibujo.png", "wb" );
fwrite( $ifp, $plainText );
fclose( $ifp );
echo "Creo que ha subido";
?>
|
_______________________________________________________
13.- Mediante PICK elegimos un archivo. Pasamos de uri a path. Lo convertimos en string Base64. Ese string lo copiamos como archivo en ASD. Lo subimos a web PHP. Se muestra página web con la imagen.
p327C_subir_archivo_imagen_Base64_ASD_PICK.aia
- Mediante ActivityStarter y PICK, elegimos un archivo de imagen en nuestro móvil.
ActivityStarter1.Acción = android.intent.action.PICK
ActivityStarter1.TipoDeDato = image/*
- Obtenemos la dirección de esa imagen en formato Uri, esto cambia de una versión a otra y de un móvil a otro.
content://com.mi.android.globalFileexplorer.myprovider/external_files/gato.png
- Mediante el bloque UriToPath, convertimos ese content a dirección de archivo:
/storage/emulated/0/gato.png
- Mediante el bloque FileToString convertimos ese archivo a string.
- Debemos quitar la base de dirección, es decir /storage/emulated/0
- Ahora convertimos ese string a archivo y lo guardamos en el ASD, con el nombre /this_is_an_image.png
- Lo mostramos en la Image2
- Subimos el string, string_2, a la web y mediante PHP lo convertimos a archivo con el nombre: dibujo.png
- Observamos ese archivo en una página web.
_______________
- Diseño.
_______________
- Bloques.
_______________
- Código PHP.
- El mismo que el anterior.
upload_b64.php
|
<?php
// Juan A. Villalpando
// kio4.com
$datos=$_POST;
$contenido=$datos['contenido'];
$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( "dibujo.png", "wb" );
fwrite( $ifp, $plainText );
fclose( $ifp );
echo "Creo que ha subido";
?>
|
_______________________________________________________
14.- Mediante PICK elegimos un archivo. Pasamos de uri a path. Lo convertimos en string Base64. Ese string lo copiamos como archivo en ASD. Lo subimos a web PHP. Se muestra página web con la imagen.
p327C_subir_archivo_imagen_Base64_ASD_PICK_CopyASD.aia
- Similar al anterior, pero mejorado.
- Mediante PICK y ActivityStarter se elige un archivo de imagen.
- Se muestra en Image1. Se obtiene su content://
- Se obtiene su dirección mediante el bloque UriToPath.
- Se copia en el ASD mediante el bloque CopyToASD, con el nombre image_in_ASD.png
- Al pulsar el Botón "File to String"
- Se muestra en Image2. Se obtiene su string Base 64.
- Al pulsar el Botón "Upload string - PHP"
- Se sube a web.
- El Botón "Image in Webpage" muestra la imagen en una página web de mi servidor.
_______________
- Bloques.
_______________________________________________________
15.- Bajamos un archivo de vídeo de 10 MB al ASD, lo convertimos a string Base 64 y luego a archivo.
p327_extensionbase64_bajarvideo.aia
- En esta página podemos encontrar varios archivos de muestra de vídeo:
https://filesamples.com/formats/mp4
- Vamos a bajar el archivo sample_960x400_ocean_with_audio.mp4
- Lo haremos de la siguiente manera:
- Bajamos el archivo al ASD.
- Obtemos su dirección en el ASD.
- Visualizamos en el VideoPlayer el vídeo bajado.
- Convertimos el archivo de vídeo a string Base 64.
- Observamos sus 100 primeros caracteres.
- Convertimos el string a archivo, lo llamamos sample_mirror.mp4 y lo guardamos en el ASD.
- Visualizamos en el VideoPlayer el vídeo sample_mirror.mp4.
_______________
- Diseño.
_______________
- Bloques.
___________________________
|