WhatsApp HTML共享图像链接

时间:2014-11-19 14:42:16

标签: html5 whatsapp

我知道你可以与之分享消息,现在正在开发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>

但是,我想通过我网站上的按钮分享图像,就像有人会通过手机(图库)分享图像一样。无论如何这可能吗?

1 个答案:

答案 0 :(得分:5)

我们想到的一个解决方案是通过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链接} field。

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