首页 文章

WhatsApp HTML共享图像链接

提问于
浏览
25

我知道你可以分享消息,这现在正在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 回答

  • 5

    想到的一个解决方案是通过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();
    

    最后,如果这些都不起作用,那么最好的办法就是在上传完成后为用户创建一个链接"confirm"发送实际上包含 href 字段中的上述 whatsapp:// 链接 .

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

相关问题