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

【问题标题】：How do I share an image with text on Whatsapp in reactjs?如何在 reactjs 中的 Whatsapp 上共享带有文本的图像？
【发布时间】：2019-03-07 03:55:58
【问题描述】：

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

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

网上的答案只针对 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 中分享图片

【问题讨论】：

标签： javascript reactjs progressive-web-apps

【解决方案1】：

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

Web Share API 有一些限制：

只能在支持 HTTPS 的网站上使用。
必须调用它以响应用户操作，例如单击。通过 onload 处理程序调用它是不可能的。
截至 2020 年年中，它仅在 Safari 和 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:'));
    } 
  }
}, []);

【讨论】：