Taking Photos with the Camera
Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor Camera API. We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
To do so, we will create a standalone composition function paired with Vue's Composition API to manage the photos for the gallery.
注記
If you are not familiar with Vue's Composition API, Why Composition API? from the official Vue docs is a good resource to start with.
Create a new file at src/composables/usePhotoGallery.ts
and open it up.
We will start by importing the various utilities we will use from Vue core and Capacitor:
import { ref, onMounted, watch } from 'vue';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';