图片的 WhatsApp HTML 分享链接

Posted 2023-03-31

【中文标题】图片的 WhatsApp HTML 分享链接

【英文标题】：WhatsApp HTML Sharing Link for Image

【发布时间】：2014-11-19 14:42:16

【问题描述】：

我知道你可以分享消息，这现在适用于 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>

但是，我想通过我网站上的按钮分享图片，就像有人分享他的手机（图库）中的图片一样。这有可能吗？

【问题讨论】：

今天（2015 年 9 月 23 日）没有办法实现这一点。最好的方法是共享链接并使用一些 force download 标头提供它。相当有侵略性，但它是你今天可以得到的更近的地方。

@JoaquínO 你能详细说明一下吗？

你知道如何实现这个吗？？

【参考方案1】：

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

大致上，流程应该是这样的（请记住，这将需要一些测试才能正确并找到适用于所有平台或至少大多数平台的解决方案）：

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

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

将用户重定向到包含图片链接的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();

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

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

【讨论】：

刚刚复习了这个问题。到目前为止，我还没有找到直接在 whatsapp 上分享图片的方法，所以从网站的角度来看，链接分享可能是最简单的选择。不过，从应用程序可能会有其他方法。

有什么解决办法吗？