Not able to share an image with text using Navigator.share

I want to share an image with a caption. Here I have the code which generates an image dynamically using the html-to-image plugin.

However, when I share the image (WhatsApp, Facebook) the text is discarded.

On the other hand, if I pass two files as an image and try to share them, the text is included in both images.

getScoreImage() {
this.dynamicImageEle = document.getElementById('quiz-share-image-wrap');

const v_this = this;

htmlToImage.toPng(this.dynamicImageEle)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
v_this.dynamicImageBase64 = img.src;
const file = v_this.dataURLtoFile(dataUrl, "ipl-quiz.png");

setTimeout(()=> {
v_this.shareFile(file);
},100)
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}

dataURLtoFile(dataurl: any, filename:any) {
var arr = dataurl.split(","),
mimeType = arr[0].match(/.*?);/)[1],
decodedData = atob(arr[1]),
lengthOfDecodedData = decodedData.length,
u8array = new Uint8Array(lengthOfDecodedData);
while (lengthOfDecodedData--) {
u8array[lengthOfDecodedData] = decodedData.charCodeAt(lengthOfDecodedData);
}
return new File([u8array], filename, { type: mimeType });

};

async shareFile(file:any) {
if (navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({
"title": this.shareTitle,
"text": this.shareText,
"files": [file, file],
})
.then(() => console.log("Share was successful."))
.catch((error) => console.log("Sharing failed", error));
} else {
console.log(`Your system doesn't support sharing files.`);
}
};



Current output with image and no text

If I pass two images then output is proper but 2 image is not expected

The expected output is image with text

Continue reading...