html - 图片的 WhatsApp HTML 共享链接

Question

我知道你可以与分享消息，现在可以在 android 和 ios 上使用:

<a href="whatsapp://send?text=Hello world this is a message and a link http://www.example.com/image.jpg">Share with whatsapp</a>

不过，我想通过我网站上的一个按钮来分享图片，就像有人会从他的手机(画廊)分享图片一样。这有可能吗？

Answer 1

想到的一个解决方案是通过 AJAX 将照片上传到您的服务器，返回上传照片的链接，然后使用您在问题中描述的方法发送包含照片链接的消息。这与直接使用 Whatsapp 发送图像完全不同，因为收件人只会收到一个链接，但我怀疑是否有办法使用网页，因为这会引起一些严重的担忧。

粗略地说，流程会像这样(请记住，这需要进行一些测试才能正确并找到适用于所有平台或至少适用于大多数平台的解决方案):

1. 在您的网站上创建图片上传。只需<input type="file" accept="image/*">在大多数平台上，您页面上的 应该允许您创建一个按钮，单击该按钮将打开一个对话框以从手机的图库中选择图像。你可以找到一个 full example here或使用诸如 Plupload 之类的库其中包含许多上传方法，包括您需要的 HTML5。

2. 创建一个简单的服务器端上传。这取决于您的语言和平台，但您需要做的就是将图像存储在某处并返回指向它的链接作为响应。如果您不想将这些图像存储在您的服务器上，您可以将其转发到 Imgur API并在那里上传。

3. 将用户重定向到 whatsapp://包含图像链接的链接。

   window.location = 'whatsapp://send?text='+encodeURIComponent(imageURL);
   

   不过，这就是您需要在不同平台上进行一些测试的地方。您可能无法重定向到 whatsapp://以这种方式链接(因为它似乎是一个安全问题)，所以你可能需要欺骗它(这是一个坏主意，但为了完整起见，我将它包括在内； data-action 部分来自 this answer ) :

   var fakeLink = document.createElement('a');
   fakeLink.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(imageURL));
   fakeLink.setAttribute('data-action', 'share/whatsapp/share');
   fakeLink.click();
   

   最后，如果这些都不起作用，最好的办法是在上传完成后创建一个链接，让用户“确认”发送，该链接实际包含上述 whatsapp://链接在 href字段。

有很多因素需要测试，有些是特定于实现的，所以我不得不在没有太多代码的情况下保持模糊 - 如果您在实现它时遇到任何其他问题，请在评论中提及。