通过 PWA 的社交媒体分享图像

Question

在我的 Nuxt PWA 中，我有一个函数可以使用这个包将 HTML 转换为 Canvas 。生成的图像采用 64 进制。现在我希望能够通过以下方式共享该图像：Whatsapp、Facebook、电子邮件、Instagram 等。我找到了几个软件包，但它们似乎都不支持仅共享文件 URL 和文本。

这是我的分享功能：

shareTicket(index) {
  html2canvas(this.$refs['ticket-' + index][0], {
    backgroundColor: '#efefef',
    useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
  }).then((canvas) => {
    let url = canvas.toDataURL('image/png') // finally produced image url

    if (navigator.share) {
      navigator.share({
        title: 'Title to be shared',
        text: 'Text to be shared',
        url: this.url,
      })
    }
  })

当我删除条件时，我在控制台中收到一个不是函数的if (navigator.share)错误。navigator.share我在某处读到它只适用于 HTTPS，所以我上传到我的临时服务器并尝试，但仍然遇到相同的错误。

需要明确的是，我希望能够共享生成的图像本身，而不是 URL。

Answer 1

告诉我这个 URL 是否适合你： https: //nuxt-share-social-media.netlify.app
如果适合，你可以在这里找到 Github 存储库： https: //github.com/kissu/so-share-图像赏金

代码是

<template>
  <div>
    <div id="capture" ref="element" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000">Hello world!</h4>
    </div>

    <br />
    <br />
    <button @click="share">share please</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  methods: {
    share() {
      // iife here
      ;(async () => {
        if (!('share' in navigator)) {
          return
        }
        // `element` is the HTML element you want to share.
        // `backgroundColor` is the desired background color.
        const canvas = await html2canvas(this.$refs.element)
        canvas.toBlob(async (blob) => {
          // Even if you want to share just one file you need to
          // send them as an array of files.
          const files = [new File([blob], 'image.png', { type: blob.type })]
          const shareData = {
            text: 'Some text',
            title: 'Some title',
            files,
          }
          if (navigator.canShare(shareData)) {
            try {
              await navigator.share(shareData)
            } catch (err) {
              if (err.name !== 'AbortError') {
                console.error(err.name, err.message)
              }
            }
          } else {
            console.warn('Sharing not supported', shareData)
          }
        })
      })()
    },
  },
}
</script>

灵感来自@denvercoder9！

有关答案的更多信息

• 我使用了IIFE，因为我不确定整个事情是如何工作的，但它在method上下文中工作得很好！
• 我添加了一个缺失的内容，async因为 ESlint，如果你想在之后做点什么
• 我使用它是$refs因为这就是你应该如何在 Vue 生态系统中选择 DOM 的特定部分
• 我已经剥离了一些东西以保持简单，托管在 Netlify 上以获得一些简单的 HTTPS 并在 Chrome ( v91) 上进行了测试，工作得很好！
• 这里又是 Web Share API 的 MDN 文档的链接。

兼容性

这是我对浏览器的体验（在 MDN 示例和我的应用程序上进行了测试，结果完全相同）

在哪里	在职的
iPad 镀铬	是的
火狐浏览器	是的
iPad 游猎	是的
窗口镀铬物	是的
火狐浏览器	不
安卓浏览器	是的
安卓 火狐	不
桌面 linux chrome	不
桌面 linux 火狐	不

对我来说，这是一个仅限移动设备的功能（就像 Android 一样）。但看起来甚至一些桌面浏览器也在处理这个问题。我不得不承认，当我看到这个可以在 Windows 上运行时，我真的感到很惊讶。
这是 Google 发布的一篇有趣的文章，与此兼容性相关：https ://web.dev/web-share/#browser-support

再次阅读MDN，它说

Web Share API 的 navigator.share() 方法调用设备的本机共享机制。

所以，我猜测“（桌面）设备”大多不支持 Share API。

TLDR：这完全按预期工作，但到目前为止兼容性确实很差。