I have a js web app that creates an image based on user selected components.

The canvas is converted to base64 data earlier in the code.

I want to be able to share the finished image via the Web Share Api but I seem to be hitting a snag.

The app seems to be producing a png file but its blank, however, using the same variable (pngUrl) in a download function appears to work just fine.

d_canvas.href = pngUrl;
d_canvas.download = "Alien_"+(Date.now())+".png";
d_canvas.click(); 

Hoping someone can help me figure out what I am missing.

I am running into issues with the following code:

async function Share(){
  var pngUrl = to_base64();
const blob = fetch(pngUrl).then(res => res.blob()).then(blob => console.log(blob));
const filesArray = [
  new File(
    [blob],
    "Alien_"+(Date.now())+".png",
    {
      type: blob.type,
      lastModified: new Date().getTime()
    }
  )
];
const shareData = {
  files: filesArray,
};
try {
  if (!(navigator.canShare(shareData))) {
    throw new Error('Can\'t share data.', shareData);
  };
  await navigator.share(shareData);
} catch (err) {
  console.error(err.name, err.message);
}
}