ionic capacitor share plugin not sharing image with whatsapp

Question

I have created this function that shares image very well on many applications, but when it comes to WhatsApp or Instagram it not sharing the image.

I'm using Ionic v5 with capacitor v3

  async shareImage() {
    let receiptName = 'Receipt N:123.png';
    const div = this.screenshotElement.nativeElement;
    const divHeight = div.clientHeight;
    const divWidth = div.clientWidth;
    const options = { background: '#ffffff', width: divWidth, height: divHeight };

    await Filesystem.requestPermissions();

    let base64Data = await domtoimage.toPng(div, options);

    // device shareing
    await Filesystem.writeFile({
      path: receiptName,
      data: base64Data,
      directory: Directory.Cache
    });


    let fileResult = await Filesystem.getUri({
      directory: Directory.Cache,
      path: receiptName
    });

    let imageLink = Capacitor.convertFileSrc(fileResult.uri);

    Share.share({
      title: receiptName,
      text: receiptName,
      url: fileResult.uri,
    })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error sharing ::: ', error));

  }

import

import domtoimage from 'dom-to-image';
import { Share } from '@capacitor/share';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Capacitor } from '@capacitor/core';
import { Camera, CameraResultType } from '@capacitor/camera';

package

 "@capacitor/android": "^3.1.1",
        "@capacitor/app": "^1.0.2",
        "@capacitor/camera": "^1.0.3",
        "@capacitor/cli": "^3.1.1",
        "@capacitor/core": "^3.1.1",
        "@capacitor/filesystem": "^1.0.2",
        "@capacitor/haptics": "^1.0.2",
        "@capacitor/ios": "^3.1.1",
        "@capacitor/keyboard": "^1.0.2",
        "@capacitor/push-notifications": "^1.0.3",
        "@capacitor/share": "^1.0.3",
        "@capacitor/status-bar": "^1.0.2",

Topminnow

Answer 1

I found that @capacitor/share has this known issue.

see: https://github.com/ionic-team/capacitor-plugins/issues/196

I solved it by using

npm install cordova-plugin-x-socialsharing
npm install @ionic-native/social-sharing
ionic cap sync

see: https://ionicframework.com/docs/native/social-sharing

Topminnow

Does this open the same "native" share drawer as this plugin does? – Ulund

Looks like still we cant share an Image along with a URL using capacitor fileshare. Did you see anything working recently without using cordova @mansour-alnasser? – Sponson

Answer 2

could also use Capacitor Filesharer saved me alot of stress!

Cavefish

Can you please share the code to share screenshot in capacitor 4 to share screenshots using the share button, thanks in advance – Olimpiaolin