用于图像的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发送图片不太一样，因为收件人只会收到一个链接，但我怀疑是否有办法使用网页将图片从你的图库发送到另一个应用程序，因为这会引起一些严重的问题。

大致上，流程是这样的（请记住，这将需要一些测试才能正确，并找到一个在所有平台或至少在大多数平台上都能良好工作的解决方案）：

>

在网站上创建图像上载。在大多数平台上，只要在页面上添加就可以创建一个按钮，当点击该按钮时，该按钮将打开一个对话框，从手机的图库中选择一个图像。你可以在这里找到一个完整的例子，或者使用一个库，比如Plupload，它包含许多上传方法，包括你所需要的HTML5。

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

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

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

不过，这是您需要在不同平台上进行一些测试的地方。您可能无法以这种方式重定向到WhatsApp:/链接（因为这似乎是一个安全问题），因此您可能需要对其进行欺骗（这是一个坏主意，但为了完整起见，我将其包括在内；Data-Action部分来自以下答案）：

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

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

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