Photo Library Ionic | Cómo acceder a las fotos del dispositivo

¿Dentro de tu app vas a permitir que el usuario cargue imágenes de su galería? O, quizás ya sabes cómo se usa Photo Library Ionic y lo que te falta es conocer los parámetros de alguna función o campo de clase ¿verdad?

Si has respondido que sí, es lógico que quieres dejar que cargue imágenes, pero déjame decirte que no eres el único, ni serás el último, que ha entrado aquí buscando respuesta a estas preguntas. Y, lógicamente, las ha encontrado.

Te digo más, hasta los que somos más expertos en el tema, necesitamos de estos artículos cuando vamos a utilizar un componente nuevo, o uno que llevamos mucho sin utilizar, así que tranquilo.

Por si no me conoces aún, mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a mostrar la galería de imágenes del dispositivo para que el usuario pueda seleccionar la que quiera utilizar. Claramente, desde el componente Photo Library Ionic.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Instalación de Photo Library Ionic

Bien, pues cómo con todos los componentes externos, tenemos que instalarlos en nuestra aplicación para poder usarlos. Para ello vamos a utilizar las dos siguientes líneas de consola:

 

ionic cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos"
npm install @awesome-cordova-plugins/photo-library

 

Vale, esta vez tenemos una variable global definida aquí. Esta será la cadena que muestre el mensaje que tendrá la ventana que aparecerá para seleccionar la imagen:

PHOTO_LIBRARY_USAGE_DESCRIPTION=”To Choose Photos” 

Pero tranquilo, aquí en el ejemplo está puesta, pero no es necesario definirla aquí. Es más, no es útil porque no se puede aplicar una traducción directamente. Pero siempre te mostraré todas las posibilidades por si la quieres utilizar.

 

Configuración de Photo Library para Ionic

Una vez realizado el paso anterior, y para poder usar el componente, necesitamos incluirlo en lo providers de nuestra app.

Nota: Si estás usando Ionic 4 o superior, y utilizas el módulo NGX, no es necesario realizar este paso.

 

...

import { PhotoLibrary } from "@awesome-cordova-plugins/photo-library/ngx";

...

providers: [
...,
PhotoLibrary,
...
]

...

 

Y, por otro lado, es muy recomendable no incluirlo en los providers del AppModule.ts a menos que lo vayamos a usar en toda la app. Es mucho mejor utilizarlo en los modules del componente que lo vaya a usar. Así mejoraremos los tiempos de carga, los rendimientos y experiencia de usuario.

Ya estamos en disposición de continuar…

 

Plataformas Soportadas por Photo Library en Ionic

La plataforma disponible para poder usar el plugin son las siguientes:

• Android
• Browser
• iOS

La única que, quizás, está un poco fuera de lugar es el Browser. Pero cómo también tiene un módulo nativo para seleccionar un archivo, pues también se puede usar.

 

Cómo se usa Photo Library desde Ionic

Vale, ahora vamos a ver cómo podemos dar uso al componente. Pero antes de continuar, y cómo en todos los tutos, me gusta incluir aquí un ejemplo y comentarlo después.

 

import { PhotoLibrary } from "@awesome-cordova-plugins/photo-library/ngx";


constructor(private photoLibrary: PhotoLibrary) { }


this.photoLibrary.requestAuthorization().then(() => {
  this.photoLibrary.getLibrary().subscribe({
    next: library => {
      library.forEach(function(libraryItem) {
        console.log(libraryItem.id); // La ID de la foto
        console.log(libraryItem.photoURL); // La URL de la imagen, será diferente según la plataforma.
        console.log(libraryItem.thumbnailURL); // La URL de la miniatura, será diferente según la plataforma.
        console.log(libraryItem.fileName); //El nombre de la imagen seleccionada.
        console.log(libraryItem.width); //El ancho
        console.log(libraryItem.height); //El alto
        console.log(libraryItem.creationDate); //La fecha en la que se crea el archivo.
        console.log(libraryItem.latitude); //En caso de que esté geolocalizado, la latitud.
        console.log(libraryItem.longitude); //Lo mismo que la anterior, pero para la longitud.
        console.log(libraryItem.albumIds);    // Un array de IDS de álbumes a los que pertenece esta imagen
      });
    },
    error: err => { console.log('No hay fotos'); },
    complete: () => { console.log('Se ha terminado la selección'); }
  });
})
.catch(err => console.log('No hay permisos para realizar esta acción'));

 

Sencillito, ¿verdad?

1. Realizamos un import de la clase para que la podamos usar en la nuestra.
2. Posteriormente inyectamos una instancia del componente a través del constructor.
3. Ahora, con la función requestAuthorization solicitamos los permisos al usuario para poder acceder a esta funcionalidad.
4. Posteriormente, con el método getLibrary abrimos la ventana de la biblioteca de imágenes y nos suscribimos al observer.
5. Controlamos las llamadas de este observer. En estas llegarán las imágenes seleccionadas.

Y visto esto, ya estamos en disposición de ver las funciones y los métodos por separado.

 

Funciones y métodos de PhotoLibrary en Ionic

Seguimos avanzando y ahora le toca el turno a las funciones y métodos. Recuerda que después veremos las interfaces. Así que, si ves algo que no entiendes del todo en los parámetros de las funciones, revisa más abajo.

getLibrary(options)

• Nos permite abrir la ventana de la librería de imágenes nativa del sistema para que el usuario seleccione las que quiera.
• Parámetros:
  • options -> GetLibraryOptions -> Las opciones con las que queremos abrir la ventana. La veremos ahora, más abajo.
• Retorna un observable al que nos tenemos que suscribir. En cada llamada llegará un array de “LibraryItem”. En estas llegan los datos de las imágenes que han sido seleccionadas. La interface la veremos más abajo.

 

requestAuthorization(options)

• Realiza la solicitud de permisos en tiempo de ejecución.
• Parámetros:
  • options -> RequestAuthorizationOptions -> Es opcional y serán los parámetros de la solicitud de permisos. La veremos más abajo.
• Retorna una promesa que tendremos que controlar. Si se resuelve es que los permisos han sido concedidos. De lo contrario saldrá por el catch.
  • Nota: En caso de que los permisos ya estén concedidos, o denegados, cuando se solicite. Se resolverá, o se saldrá por el catch, respectivamente.

 

getAlbums()

• Bien, esta función es similar a “getLibrary” pero para los álbumes.
• Retorna una promesa que hay que controlar. En caso de que se resuelva es que todo ha ido bien y lleva consigo un array de “AlbumItem” que veremos ahora, más abajo.

 

getThumbnailURL(photo, options)

• Esta función nos permite obtener la URL de una miniatura de una imagen mediante un tamaño o calidad especificada.
• Parámetros:
  • photo -> string | LibraryItem -> Será el ID de la foto o el LibraryItem del que queremos obtener la miniatura.
  • Options -> GetThumbnailOptions -> Las opciones de calidad, tamaño, etc… que queremos de la miniatura.
• Retorna una promesa que tenemos que controlar. Con ella llega una cadena con la ruta local de la miniatura.

 

getPhotoUrl(photo, options)

• Nos retorna la URL de una imagen.
• Parámetros:
  • photo -> string | LibraryItem -> El ID o el LibraryItem de la imagen de la que queremos obtener la ruta.
  • options -> GetPhotoOptions -> Será opcional y veremos ahora los campos.
• Retorna una promesa que tendremos que controlar. En ella llega una cadena con la URL de la imagen.

 

getThumbnail(photo, options)

• Retorna una miniatura solicitada en formato Blob.
• Parámetros:
  • photo -> string | LibraryItem -> El ID o el LibraryItem de la imagen de la que queremos obtener la ruta.
  • options -> GetPhotoOptions -> Será opcional y veremos ahora los campos.
• Retorna una promesa que tendremos que controlar. En ella llega una instancia de un Blob con los datos de la imagen.

 

getPhoto(photo, options)

• Retorna una imagen solicitada en formato Blob.
• Parámetros:
  • photo -> string | LibraryItem -> El ID o el LibraryItem de la imagen de la que queremos obtener la ruta.
  • options -> GetPhotoOptions -> Será opcional y veremos ahora los campos.
• Retorna una promesa que tendremos que controlar. En ella llega una instancia de un Blob con los datos de la imagen.

 

saveImage(url, album, options)

• Con esta función guardamos la imagen dada en un álbum en concreto.
• Parámetros:
  • url -> string -> Será la URL del archivo.
  • album -> string | AlbumItem -> El nombre del album, o AlbumItem, donde queramos poner la imagen.
  • options -> GetThumbnailOptions -> Serán las opciones con las que se recogerá la imagen que resulte en la promesa.
• Retorna una promesa que hay que controlar. En ella llega una instancia de “LibraryItem” con los datos de la imagen guardada.

 

saveVideo(url, album)

• Similar a la función anterior, pero para vídeo en lugar de imágenes.
• Parámetros:
  • url -> string -> La URL del vídeo que queremos guardar en el album.
  • album -> AlbumItem | string -> Será el nombre del Album, o el AlbumItem, donde queremos meter el vídeo.
• Retorna una promesa que hay que controlar. Si se resuelve es que todo ha ido bien. De lo contrario fallará y se saldrá por el catch.

 

Interfaces y clases complementarias de Photo Library

Bien, ahora veamos la interfaces y clases que hemos ido viendo durante todo el tutorial que tienen una relación directa con esta clase.

 

LibraryItem

  export interface LibraryItem {
    id: string;
    photoURL: string;
    thumbnailURL: string;
    fileName: string;
    width: number;
    height: number;
    creationDate: Date;
    latitude?: number;
    longitude?: number;
    albumIds?: string[];
  }

 

GetLibraryOptions

  export interface GetLibraryOptions {
    thumbnailWidth?: number;
    thumbnailHeight?: number;
    quality?: number;
    itemsInChunk?: number;
    chunkTimeSec?: number;
    useOriginalFileNames?: boolean;
    includeImages?: boolean;
    includeAlbumData?: boolean;
    includeCloudData?: boolean;
    includeVideos?: boolean;
    maxItems?: number;
  }

 

RequestAuthorizationOptions

  export interface RequestAuthorizationOptions {
    read?: boolean;
    write?: boolean;
  }

 

AlbumItem

  export interface AlbumItem {
    id: string;
    title: string;
  }

 

GetThumbnailOptions

  export interface GetThumbnailOptions {
    thumbnailWidth?: number;
    thumbnailHeight?: number;
    quality?: number;
  }

 

 

GetPhotoOptions

Esta interface es bastante peculiar, nos sirve para extenderla y meter los campos que queramos. Es más, este es si código:

  export interface GetPhotoOptions {

  }

Cómo puedes ver, no tiene nada.

Más contenidos del curso

 

 

Y el tutorial en vídeo, como siempre

Esta vez no he encontrado uno que tenga que ver directamente con el componente, pero lo usa en profundidad y es más. En este vemos cómo hace una aplicación completa. Espero que te sirva.

 

 

Y con esto terminamos lector, ha sido un placer hacer este tutorial porque sé que va a ayudar porque no hay ninguno mejor en castellano. Solo queda despedirme hasta el siguiente artículo. Hasta entonces, que vaya bien 🙂