Capacitor Share Image shares Base64 string

Capacitor
1

Hey guys,

I have a simple drawing app that creates an image. I am displaying the image just fine. When I try to share the image it also works, but a Base64 string is being shared instead of the image. Is there any way I can send the Image? Again… I am not using the Camera but creating the image in the app.

image
image542×503 65.5 KB

 async share() {
    await Share.share(
      {
        title: 'Whirly',
        text: 'Check out my Whirly!',
        url:this.imgSrc
      }
    )
  }

image
image788×454 51 KB

I think that I am sending a Base64 string because that is exactly what the URL is pointing to. I don’t know a better way to do it.

Here is the code that is setting the URL

let imageData: string;

    let data = this.context.getImageData(0, 0, this.canvasWidth, this.canvasHeight);
    this.context.globalCompositeOperation = "destination-over";
    this.context.fillStyle = this.backColor;
    this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
    imageData = this.canvas.toDataURL("image/png");
    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    this.context.putImageData(data, 0, 0);
    this.context.globalCompositeOperation = 'source-over';

    let picModal = await this.modalCtlr.create({
      component: PicPage,
      componentProps: {
        "imgSrc": imageData
      }
    });

Thanks in advance

2

Capacitor’s Share plugin doesn’t support sharing base64 images, only file urls, and not all apps will accept the file urls as images, so won’t appear as sharing option (like Instagram, it’s already reported on the plugin repository)

3

Ok thanks. I ended up using the Capacitor Filesharer Plugin, which does a great job at sharing a base64 string as a file attachment.

1 Like
4

I’m a bit confused on how to share a photo taken using Plugins.Camera with Plugins.Share. I’ve tried using a photo taken and written to Plugins.Filesystem using const savedFile = await Filesystem.writeFile(...) by passing savedFile.uri which I thought was a file URLs, but doesn’t appear to work. I could pull in Capacitor Filesharer, but feels like you’re saying it should work as long as we’re using a file URL. I created a photo library using the Camera gallery example provided in the docs - Adding Mobile - Ionic Documentation.

5

Couldn’t seem to get it to work when reading from the FileSystem, but can take a photo and use the path provided in CameraPhoto.