How to capture screenshot and download it as pdf/png in ionic capacitor using angular ts

Ionic Framework
1

I wanted to capture a part of a screen in my mobile app and download it as a pdf or png.in my mobile application the download permisssion was not enabled. And i cant do it with the native storage permission plugin.Is there any way to redirect my captured screen to browser to download it.

2

Capture the screenshot and encode it as a base64 string. Then create a data URL with the base64 string and redirect the user to this URL. That’s all, the screenshot will open in the user’s web browser, allowing them to download it.

3

It is hard to enable the storage…since the pdf is not downloading

4

Two plugins can be use

import { Filesystem, Directory } from '@capacitor/filesystem';
import { Screenshot } from 'capacitor-screenshot';

Use file system plugin to save the screen shot image and retrieve it to show in your app.
Not getting why download needed

  const result=await Filesystem.writeFile({
      path: "myfile.png",
      data: img.base64,
      directory:Directory.Documents
    });

if want more details then check on TechBinomial channel.

5

In my case i need to download the captured screen as PNG/PDF.But in android version 13 i dont know how to grant the permission for external storage access

the function for capturing screen shot and downloading looks like
async captureAndDownloadScreen() {
const element = document.getElementById(‘captureElement’);
if (element) {
try {
const canvas = await html2canvas(element);
const screenshotURI = canvas.toDataURL(‘image/png’);
const blob = this.dataURItoBlob(screenshotURI);

    await this.requestStoragePermission();
    const fileName = 'screenshot.png';
    const base64Data = screenshotURI;

    const savedFile = await this.writeFileToDocumentsDirectory(fileName, base64Data) as { uri: string };
    console.log('Screenshot saved successfully:', savedFile.uri);
  } catch (error) {
    console.error('Error capturing screenshot:', error);
  }
}

}
private async writeFileToDocumentsDirectory(fileName: string, base64Data: string) {
return new Promise((resolve, reject) => {
const blob = this.dataURItoBlob(base64Data);
const reader = new FileReader();

  reader.onloadend = async () => {
    const data = reader.result as string;

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

      resolve(savedFile);
    } catch (error) {
      reject(error);
    }
  };

  reader.readAsDataURL(blob);
});

}
checkAndRequestStoragePermission(): Promise {
return new Promise((resolve, reject) => {
this.AndroidPermissions.hasPermission(this.AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
resolve(‘Permission already granted for external storage’);
} else {
this.AndroidPermissions.requestPermission(this.AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
resolve(‘Permission granted for external storage’);
} else {
reject(‘Permission denied for external storage’);
}
})
.catch(error => {
reject(Error requesting storage permission: ${error});
});
}
})
.catch(error => {
reject(Error checking storage permission: ${error});
});
});
}

src_app_pages_home_module_ts.js:930 Error capturing screenshot: Error: Unable to do file operation, user denied permission request
at returnResult (VM3:853:32)
at win.androidBridge.onmessage (VM3:828:21)

this is what i get after requesting for a download

8

Can u share ur code.So it would be helpful for me to understand the flow.

9

The error message indicates that the user denied the permission request for external storage access. This is why the file operation failed when you tried to save the screenshot to the Documents directory.

To fix this, you need to explicitly request the READ_EXTERNAL_STORAGE permission before attempting to save the screenshot. You can do this using the AndroidPermissions plugin.

So modify your code to request the permission and save the screenshot:
async captureAndDownloadScreen() {
const element = document.getElementById(‘captureElement’);

if (element) {
try {
await this.checkAndRequestStoragePermission();

  const canvas = await html2canvas(element);
  const screenshotURI = canvas.toDataURL('image/png');
  const blob = this.dataURItoBlob(screenshotURI);

  const fileName = 'screenshot.png';
  const base64Data = screenshotURI;

  const savedFile = await this.writeFileToDocumentsDirectory(fileName, base64Data) as { uri: string };
  console.log('Screenshot saved successfully:', savedFile.uri);
} catch (error) {
  console.error('Error capturing screenshot:', error);
}

}
}

private async checkAndRequestStoragePermission(): Promise {
const status = await this.AndroidPermissions.checkPermission(this.AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE);

if (!status.hasPermission) {
await this.AndroidPermissions.requestPermission(this.AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE);
}
}

This code will first check if the user has already granted the READ_EXTERNAL_STORAGE permission. If not, it will request the permission and wait for the user’s response. Once the permission is granted, the code will save the screenshot to the Documents directory.

10

I had tried this but in android 13 the permission request is denied.So any other alternatives for downloading the captured image redirtect to browser

11

For capturing the screenshot capacitor-screenshot plugin is available.

below method is provided to capture screen shot.

Screenshot.take().then((ret: { base64: string }) => {
        //console.log(ret.base64); // or `data:image/png;base64,${ret.base64}`
        this.imageSource='data:image/png;base64,' + ret.base64;     

        this.SavePhoto(ret);
  });

for step to step demonstration more info here