R4A.10 - Compléments Web (vuejs)

npm install @ionic/pwa-elements
npm install @capacitor/camera

... // on garde tout depuis le début jusqu'à :
import './theme/variables.css'

// ajout des pwa-elements
import { defineCustomElements } from '@ionic/pwa-elements/loader';
defineCustomElements(window);

... // on garde la suite

<template>
  <ion-content>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <img :src="imageSrc" />
    <ion-button @click="takePhoto()">Take Photo</ion-button>
  </ion-content>
</template>

<script setup>
import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton } from '@ionic/vue';
import { ref } from 'vue';
import { Camera, CameraResultType } from '@capacitor/camera';

const imageSrc = ref('');
const takePhoto = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri,
  });

  imageSrc.value = image.webPath;
};
</script>

3.2°/ Une galerie de photo, avec sauvegarde locale

• Le site ionic propose un tutoriel pour créer une application de galerie de photo, avec celles qui sont prise via la caméra : 
  • le tutoriel : https://ionicframework.com/docs/vue/your-first-app
  • le github de la solution complète : https://github.com/ionic-team/tutorial-photo-gallery-vue

Remarques :

• Les photos sont sauvegardées localement en tant que fichier à des emplacements différents selon la plateforme d'exécution.
• Si c'est un navigateur desktop, les images sont placées dans le répertoire de votre profil utilisateur du navigateur, au sein d'un fichier texte représentant un BdD.
• Si c'est un mobile, les images sont enregistrées sur le disque, ou disons plutôt la carte mémoire.
• Même si capacitor permet d'abstraire relativement bien le matériel, il y a quand même des différences qui nécessitent d'écrire du code qui tient compte de la plateforme.
• C'est notamment le cas avec la caméra qui produit un résultat différent et qu'il font donc parfois traiter afin de sauvegarder l'image avec le même format, quel que soit la plateforme.
• Par exemple, pour une appli mobile, le plugin caméra renvoie directement un objet contenant le chemin d'accès à l'image en mémoire, que l'on peut donc lire directement, grâce aux fonctions de lecture fournies par capacitor (cf Filesystem.readFile() ) et obtenir une chaîne de caractère encodée au format base64, représentant l'mage. Cette chaîne peut ensuite être utilisée pour une sauvegarde dans un fichier local (cf. Filesystem.writeFile() )
• En revanche, pour une appli desktop, ce plugin renvoie une URL, et il faut donc faire une requête HTTP (bien entendue purement locale) pour récupérer les données, par exemple grâce à la fonction fetch(). Le résultat doit encore être converti au format base64, avant de pouvoir être sauvegardé localement.