Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49256

The path of image uploading is not taking

$
0
0

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

Read full topic


Viewing all articles
Browse latest Browse all 49256

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>