如何在 ReactJS 中的 Whatsapp 上共享带有文本的图像？

Question

我尝试过 sharethis-reactjs https://libraries.io/npm/sharethis-reactjs ，也尝试过分享https://www.npmjs.com/package/react-share。

我所能做的就是发送网址或一些文本，我想发送带有一些文本的图像（只有图像也可以）。

互联网上的答案只是react-native，我正在reactjs中寻找解决方案。我正在创建一个 PWA，因此它将在手机上运行。

<InlineShareButtons
      config={{
        alignment: 'center',  // alignment of buttons (left, center, right)
        color: 'social',      // set the color of buttons (social, white)
        enabled: true,        // show/hide buttons (true, false)
        font_size: 16,        // font size for the buttons
        labels: 'cta',        // button labels (cta, counts, null)
        language: 'en',       // which language to use (see LANGUAGES)
        networks: [           // which networks to include (see SHARING NETWORKS)
          'whatsapp',
          'linkedin',
          'messenger',
          'facebook',
          'twitter'
        ],
        padding: 12,          // padding within buttons (INTEGER)
        radius: 4,            // the corner radius on each button (INTEGER)
        show_total: true,
        size: 40,             // the size of each button (INTEGER)

        // OPTIONAL PARAMETERS
        url: '', // (defaults to current url)
        image: '',  // (defaults to og:image or twitter:image)
        description: 'custom text',       // (defaults to og:description or twitter:description)
        title: 'custom title',            // (defaults to og:title or twitter:title)
        message: 'custom email text',     // (only for email sharing)
        subject: 'custom email subject',  // (only for email sharing)
        username: 'custom twitter handle' // (only for twitter sharing)
      }}
    />

有人可以告诉我我可以在 image=" " 中输入什么来共享图像或在 React js 中共享图像的任何其他方式

Answer 1

您可以在 React.js Web 应用程序中使用 Web Share API 来共享文本、URL 和文件。通过 Web Share API，Web 应用程序能够以与本机应用程序相同的方式与设备上安装的其他应用程序共享文本、URL 和文件。

Web Share API 有一些限制：

• 它只能在支持 HTTPS 的站点上使用。
• 必须调用它来响应用户操作（例如单击）。通过 onload 处理程序调用它是不可能的。
• 截至 2020 年中期，它仅在 Safari 和 Chromium 分支中的 Android 上可用。

https://web.dev/web-share/

以下代码可用于共享文本和 URL 以及图像：

const handleOnSubmit= async()=> {
  const response = await fetch(image);
  // here image is url/location of image
  const blob = await response.blob();
  const file = new File([blob], 'share.jpg', {type: blob.type});
  console.log(file);
  if(navigator.share) {
    await navigator.share({
      title: "title",
      text: "your text",
      url: "url to share",
      files: [file]     
    })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error in sharing', error));
  }else {
    console.log(`system does not support sharing files.`);
  }
}

useEffect(()=> {
  if (navigator.share === undefined) {
    if (window.location.protocol === 'http:') {
      window.location.replace(window.location.href.replace(/^http:/, 'https:'));
    } 
  }
}, []);