Issue saving generated image to local filesystem in iOS using Capacitor

42 Views Asked by At

I'm working on an Ionic application with Capacitor, where I generate a chart using Highcharts and convert it to an image using html2canvas. My goal is to save this image to the local filesystem of the device, specifically on iOS.

I've implemented the following code in my application:

<ion-button (click)="downloadChartAsImage()">Descargar Gráfico</ion-button>

//metodo para descargar gráfico renderizado con highcharts
async downloadChartAsImage() {
  const chartContainer = document.getElementById('highchartsContainer');

  if (chartContainer) {
    try {
      const canvas = await html2canvas(chartContainer);
      const imageData = canvas.toDataURL('image/png');

      if (Capacitor.isNative && Capacitor.getPlatform() === 'ios') {
        // en dispositivos ios guardar la imagen en el sistema de archivos local
        const base64Data = imageData.replace(/^data:image\/png;base64,/, '');

        const fileName = 'chart.png';

        const result = await Filesystem.writeFile({
          path: fileName,
          data: base64Data,
          directory: Directory.Documents
        });

        if (result && result.uri) {
          // notificar que la imagen se ha guardado
          console.log('Imagen guardada en el sistema de archivos local:', result.uri);

          // notificar al usuario que la imagen se ha guardado
          alert('Imagen guardada en el sistema de archivos local: ' + result.uri);
        } else {
          console.error('Error al guardar la imagen: No se devolvió una URI.');
        }

      } else {
        // en otros dispositivos, crear un enlace para la descarga de la imagen
        const a = document.createElement('a');
        a.href = imageData;
        a.download = 'chart.png';
        a.click();
      }
    } catch (error) {
      console.error('Error al generar o guardar la imagen del gráfico:', error);
    }
  } else {
    console.error('Contenedor del gráfico no encontrado.');
  }
}

The issue I'm facing is that although the console shows me the URI of the file saved to the local filesystem (file://...), I can't find this image on the iOS simulated device. However, if I run the command open chart.png in the terminal, I can view the image correctly.

Is there something I'm overlooking or any additional configuration needed in iOS for the saved image to be accessible from the application?

Any help or suggestions would be appreciated. Thank you!

I've tried several troubleshooting steps to locate the saved image on the iOS device:

1.Verified the Filesystem Path: I've double-checked the path where the image is saved using Filesystem.writeFile() and confirmed that it matches the expected directory (Directory.Documents) and filename (chart.png).

2.Checked Application Sandbox: I've explored the application sandbox on the iOS simulator to manually search for the saved image file but couldn't locate it.

3.Tested Terminal Command: Running open chart.png in the terminal successfully opens the image, indicating that it exists in the filesystem.

I expected the saved image to be accessible within the application's sandbox directory on the iOS device, similar to how it's accessible via the terminal command. However, despite the successful save operation reported by Capacitor, I'm unable to locate the image within the application's filesystem.

0

There are 0 best solutions below