I am able to take picture using ionic but there is an issue in the path of image.When I debugged, path is shown as DATA/“photo_1709873191596.png”. The code for image uploading is written in home.page.ts which is in C:\copies\detectFace\myApp\src\app\home. I have given the DATA folder in C:\copies\detectFace\myApp\android\app\src\main\assets\DATA
import { Component, ViewChild, ElementRef } from ‘@angular/core’;
import { Camera, CameraSource, CameraResultType} from ‘@capacitor/camera’;
import { IonHeader, IonToolbar, IonTitle, IonContent } from ‘@ionic/angular/standalone’;
import * as faceapi from ‘face-api.js’;
import { CommonModule } from ‘@angular/common’;
import { Filesystem, Directory} from ‘@capacitor/filesystem’;
import { defineCustomElements } from ‘@ionic/pwa-elements/loader’;
import { HttpClient } from ‘@angular/common/http’;
import { WebcamService } from ‘./webcam.service’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
standalone: true,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, CommonModule],
// Include CommonModule in the imports array
})
//declare var OpenCV: any;
export class HomePage {
capturedImage: string | undefined;
isImageCaptured: boolean = false; // Track if image is captured
http: any;
//@ViewChild(‘videoElement’)videoElement!: ElementRef;
async ngAfterViewInit() {
// const video = this.videoElement.nativeElement;
//await this.detectFaces(video);
}
async takePhoto() {
try {
const capturedPhoto = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Base64
});
// Check if a photo was captured
if (capturedPhoto && capturedPhoto.base64String) {
// Extract the filename from the data URL
const filename = this.generateFilename();
const filePath = await this.saveImageToFile(capturedPhoto.base64String, filename);
alert(filePath);
// Do something with the filename (e.g., save or display)
console.log('Filename:', filename);
// Update the captured image
this.capturedImage = filePath;
this.isImageCaptured = true;
} else {
console.error('Base64 image is undefined');
}
} catch (error) {
console.error('Error taking photo', error);
}
}
generateFilename(): string {
const timestamp = new Date().getTime();
return photo_${timestamp}.png
; // Example: photo_1626785438756.jpg
}
async saveImageToFile(base64Image: string, filename: string): Promise {
try {
// Save the image file
const path = DATA/${filename}
;
console.log(“PATH OF FILE:”, path);
await Filesystem.writeFile({
path: path,
data: base64Image,
directory: Directory.Data,
recursive: true
});
return path;
} catch (error) {
console.error('Error saving image to file', error);
throw error;
}
}
}
defineCustomElements(window);
1 post - 1 participant