Google Maps capture with html2canvas failing on android

I have been trying to implement google maps capture within a mobile application that I am developing. This is implemented using ionic and capacitor as a framework.

Plugin versions: 6.0.1
Ionic version: 7.2.0
Android V: 11.0

Now the development works on chrome, when I run the ionic web debug I can export the capture to a image, and I see the map fine. However same but as an android application fails to show the map. Below the typescript code, and HTML setup.

.ts:

html2canvas(this.captureElement.nativeElement, {
  useCORS: true,
  backgroundColor: "transparent",
  allowTaint: true,
  ignoreElements: (node) => {
    return node.nodeName === "IFRAME";
  }
}).then(async (canvas) => {
  // Convert canvas to image
  const base64Image = canvas.toDataURL('image/png'); // You can change to 'image/jpeg' if needed
  console.log(base64Image)
});

.HTML:

<div #captureElement class="capture-box">
<div class="container">
  <div #map style="width: 100%;height: 100%;display: inline-block;"></div>
</div>

<div class="header">
  <div class="image profile" [style.background-image]="'url(' + base64 + ')'"></div>
  <div class="info-container">
    <h1 class="primary-text title">{{name}}</h1>
    <p class="date">{{dob.split('/').join('-')}} | {{ 'map.icon.death' | translate }} {{dod.split('/').join('-')}}</p>
  </div>
</div>

.ts for map:

this.map = await GoogleMap.create({
    id: 'my-map', //'map-'+this.name,
    apiKey: environment.maps.api,
    element: this.mapRef.nativeElement,
    forceCreate: true,
    config: {
      zoom: environment.maps.initialZoom,
      center: {
        lat: 52.3785,
        lng: 4.89998
      }
    },
  });

The captureElement.nativeElement is the div with #captureElement. The capture-box contains CSS to simply set the width and height to 100vw and 100vh.

The android permissions as the map is visible in the app, but not the image.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature android:name="android.hardware.location.gps" />

You need to sign in to view this answers

Related Post