如何通过Web分享API共享单个Base64 URL图像？

Question

因此，我需要使用TypeScript的Web Share API分享一个base64图像字符串。

如果我将base64字符串作为url参数传递，是否可以这样做：

  var base64url = "data:image/octet-stream;base64,/9j/4AAQSkZ...."
  navigator.share({
    title: 'Hello',
    text: 'Check out this image!',
    url: base64url ,
  })

还是需要一个文件数组并使用Web共享API v2吗？如果是这样，我该如何实现它？我只有一个base64字符串，而我能找到的例子都太令人困惑了。

在这方面，我是一个新手，所以非常感谢您的帮助！

- Ben

---

它可以工作，但大多数平台在您分享此URL时不会将其显示为链接，它只会出现为文本，并且大多数非技术人员甚至不知道什么是base64 URL，他们复制并粘贴URL到浏览器的可能性非常低。 - Yanjan. Kaf.

@blacksheep 好的，那么我该如何通过 Web 分享 API 共享一个适当的图像文件呢？你能帮忙吗？ - Ben

Answer 1

如评论中所提到的，将URL分享到URL字段中不会为用户带来良好的结果。

您可以使用以下代码使用Web Share API v2：

const base64url = "data:image/octet-stream;base64,/9j/4AAQSkZ...."
const blob = await (await fetch(base64url)).blob();
const file = new File([blob], 'fileName.png', { type: blob.type });
navigator.share({
  title: 'Hello',
  text: 'Check out this image!',
  files: [file],
})

根据实际的图片URL，您可能需要调整扩展名和MIME类型。

请注意，目前v2仅在Android Chrome上可用（我找不到一个好的来源，但我在项目中已经这样做了）。 您可以使用navigator.canShare()在运行时检查其可用性。

- Alex de Boutray

---

值得注意的是，尽管这完全可行，但某些应用程序（如 Messenger）仅在files中指定图像时才会发送图像，并忽略传递的URL。Discord将同时发送两者，但如果您需要广泛覆盖，请确保进行测试。 - saricden