我正在使用Web Share API来允许从我的Web应用程序下载/共享图像。我遵循了文档并使其工作良好,但是,在某些IOS设备上,共享API失败。我注意到这种情况发生在IOS 12、14甚至15上。它在我运行15.1.1的个人iPhone上运行良好,但在我们客户运行某些版本的IOS 15的iPhone上失败(不确定确切版本(。到目前为止,我还没有在任何安卓设备上看到这个问题。
// This function is called when the use hits the take screenshot button on the app. This is where we are creating the image that will be shared via Web Share API
function createFinalImage() {
const screenshotContainer = document.getElementById("screenshot-container")
// here we are turning all elements in our screenshot container into one image
html2canvas(screenshotContainer).then(canvas => {
try {
var finalScreenshot = canvas.toDataURL('image/jpeg', 1);
// share image
shareScreenshot(finalScreenshot)
}
catch (e) {
console.log("Screenshot failed: " + e);
}
});
}
// Here we are sending the image to the web share API
async function shareScreenshot(finalScreenshot) {
const blob = await (await fetch(finalScreenshot)).blob();
const filesArray = [
new File(
[blob],
`harry-caray${Date.now()}.jpg`,
{
type: blob.type,
lastModified: new Date().getTime()
}
)
];
const shareData = {
files: filesArray,
};
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share(shareData);
} else {
console.log(`Your system doesn't support sharing files.`);
}
}
// share screenshot
document.getElementById("share-button").addEventListener("click", function() {
createFinalImage()
});
在Web共享失败的设备上,我看到";您的系统不支持共享文件"在控制台中,所以这就是它出错的地方。
常规提示:将await navigator.share()
调用包装在try..catch
中。这样,您就可以知道是有人刚刚取消了共享操作(抛出AbortError
(,还是它真的失败了(抛出其他错误(。
浏览器支持带有files
参数的Web Share API,如您在CanIUse上看到的那样。在API真正得到支持之前,人们可能已经在Safari中切换了功能标志以启用支持。