I want to share an image with caption. here I have a code which generate an image dynamically with using html-to-image plugin. Everything works properly but the text get discarded while the image get share on Whatsapp, Facebook and etc.
And on the otherside if i pass two file as an image and try to share then text get included on both the image.
following is my code
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 Pass two image then output is proper but 2 image is not expected
Expecting output I want to share is image with text.