无法使用 Navigator.share 共享带有文本的图像

Question

我想分享带有标题的图像。这里我有使用

html-to-image

插件动态生成图像的代码。

但是，当我分享图像（WhatsApp、Facebook）时，文本将被丢弃。

另一方面，如果我将两个文件作为图像传递并尝试共享它们，文本将包含在这两个图像中。

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.`);
    }
};

预期输出是带有文本的图像

Answer 1

此 API 在使用时存在一些不一致的情况。我目前也面临着同样的问题； 现在，我可以通过构建动态图像（文本重叠）然后共享它来克服它。

或者我会通过链接（图像预览）提供图像并与其共享文本。

抱歉，我无法在评论部分添加此答案，因为我没有足够的声誉。