|
| 1 | +import { Capacitor } from '@capacitor/core' |
| 2 | +import { |
| 3 | + Camera, |
| 4 | + CameraSource, |
| 5 | + CameraResultType, |
| 6 | + Photo, |
| 7 | +} from '@capacitor/camera' |
| 8 | +import { Filesystem, Directory } from '@capacitor/filesystem' |
| 9 | +import { Storage } from '@capacitor/storage' |
| 10 | + |
| 11 | +export function usePhotoGallery() { |
| 12 | + const photos = ref<UserPhoto[]>([]) |
| 13 | + const PHOTO_STORAGE = 'photos' |
| 14 | + |
| 15 | + const loadSaved = async () => { |
| 16 | + const photoList = await Storage.get({ key: PHOTO_STORAGE }) |
| 17 | + const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [] |
| 18 | + |
| 19 | + // If running on the web... |
| 20 | + if (!isPlatform('hybrid')) { |
| 21 | + for (const photo of photosInStorage) { |
| 22 | + const file = await Filesystem.readFile({ |
| 23 | + path: photo.filepath, |
| 24 | + directory: Directory.Data, |
| 25 | + }) |
| 26 | + // Web platform only: Load the photo as base64 data |
| 27 | + photo.webviewPath = `data:image/jpeg;base64,${file.data}` |
| 28 | + } |
| 29 | + } |
| 30 | + |
| 31 | + photos.value = photosInStorage |
| 32 | + } |
| 33 | + |
| 34 | + const convertBlobToBase64 = (blob: Blob) => |
| 35 | + new Promise((resolve, reject) => { |
| 36 | + const reader = new FileReader() |
| 37 | + reader.onerror = reject |
| 38 | + reader.onload = () => { |
| 39 | + resolve(reader.result) |
| 40 | + } |
| 41 | + reader.readAsDataURL(blob) |
| 42 | + }) |
| 43 | + |
| 44 | + const savePicture = async ( |
| 45 | + photo: Photo, |
| 46 | + fileName: string |
| 47 | + ): Promise<UserPhoto> => { |
| 48 | + let base64Data: string |
| 49 | + // "hybrid" will detect Cordova or Capacitor; |
| 50 | + if (isPlatform('hybrid')) { |
| 51 | + const file = await Filesystem.readFile({ |
| 52 | + // eslint-disable-next-line |
| 53 | + path: photo.path!, |
| 54 | + }) |
| 55 | + base64Data = file.data |
| 56 | + } else { |
| 57 | + // Fetch the photo, read as a blob, then convert to base64 format |
| 58 | + // eslint-disable-next-line |
| 59 | + const response = await fetch(photo.webPath!) |
| 60 | + const blob = await response.blob() |
| 61 | + base64Data = (await convertBlobToBase64(blob)) as string |
| 62 | + } |
| 63 | + const savedFile = await Filesystem.writeFile({ |
| 64 | + path: fileName, |
| 65 | + data: base64Data, |
| 66 | + directory: Directory.Data, |
| 67 | + }) |
| 68 | + |
| 69 | + if (isPlatform('hybrid')) { |
| 70 | + // Display the new image by rewriting the 'file://' path to HTTP |
| 71 | + // Details: https://ionicframework.com/docs/building/webview#file-protocol |
| 72 | + return { |
| 73 | + filepath: savedFile.uri, |
| 74 | + webviewPath: Capacitor.convertFileSrc(savedFile.uri), |
| 75 | + } |
| 76 | + } else { |
| 77 | + // Use webPath to display the new image instead of base64 since it's |
| 78 | + // already loaded into memory |
| 79 | + return { |
| 80 | + filepath: fileName, |
| 81 | + webviewPath: photo.webPath, |
| 82 | + } |
| 83 | + } |
| 84 | + } |
| 85 | + |
| 86 | + const takePhoto = async () => { |
| 87 | + const photo = await Camera.getPhoto({ |
| 88 | + resultType: CameraResultType.Uri, |
| 89 | + source: CameraSource.Camera, |
| 90 | + quality: 100, |
| 91 | + }) |
| 92 | + const fileName = new Date().getTime() + '.jpeg' |
| 93 | + const savedFileImage = await savePicture(photo, fileName) |
| 94 | + |
| 95 | + photos.value = [savedFileImage, ...photos.value] |
| 96 | + } |
| 97 | + |
| 98 | + const deletePhoto = async (photo: UserPhoto) => { |
| 99 | + // Remove this photo from the Photos reference data array |
| 100 | + photos.value = photos.value.filter(p => p.filepath !== photo.filepath) |
| 101 | + |
| 102 | + // delete photo file from filesystem |
| 103 | + const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1) |
| 104 | + await Filesystem.deleteFile({ |
| 105 | + path: filename, |
| 106 | + directory: Directory.Data, |
| 107 | + }) |
| 108 | + } |
| 109 | + |
| 110 | + const cachePhotos = () => { |
| 111 | + Storage.set({ |
| 112 | + key: PHOTO_STORAGE, |
| 113 | + value: JSON.stringify(photos.value), |
| 114 | + }) |
| 115 | + } |
| 116 | + |
| 117 | + onMounted(loadSaved) |
| 118 | + |
| 119 | + watch(photos, cachePhotos) |
| 120 | + |
| 121 | + return { |
| 122 | + photos, |
| 123 | + takePhoto, |
| 124 | + deletePhoto, |
| 125 | + } |
| 126 | +} |
| 127 | + |
| 128 | +export interface UserPhoto { |
| 129 | + filepath: string |
| 130 | + webviewPath?: string |
| 131 | +} |
0 commit comments