如何通过 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 ,
  })

或者我需要有一个 Files Array 并使用 Web Share API v2 吗？如果是这样，我该如何实现它，我所拥有的只是一个 base64 字符串，而我发现的示例太混乱了。

我是这方面的菜鸟，因此将不胜感激！

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()在运行时检查可用性。