图片的 WhatsApp HTML 共享链接

WhatsApp HTML Sharing Link for Image

提问by Manuel

I know you can share messages with and this is working on android and ios now:

我知道您可以与他人共享消息，并且现在正在 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>

However I'd like to share an image trough a button on my website like someone would share an image from his phone (gallery). Is this anyhow possible?

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

采纳答案by fstanis

One solution that comes to mind is uploading a photo to your server via AJAX, returning the link to the uploaded photo and then sending a message with the link to your photo using the method you described in your question. This is not quitethe same as sending an image directly using Whatsapp since the recipient would only receive a link, but I doubt there will ever be a way to send an image to another application from your gallery using a webpage since that would raise some serious concerns.

想到的一种解决方案是通过 AJAX 将照片上传到您的服务器，返回上传照片的链接，然后使用您在问题中描述的方法发送带有照片链接的消息。这不是很一样直接发送图像使用WhatsApp的，因为收件人只收到一个链接，但我怀疑有将永远不会从您的画廊利用网页中的图像发送到另一个应用程序，因为这会引起一些严重的一种方式担忧。

Roughly, the process would like this (keep in mind that this will require some testing to get right and find a solution that works well on all platforms or at least most of them):

粗略地说，该过程是这样的（请记住，这需要进行一些测试才能正确并找到适用于所有平台或至少大多数平台的解决方案）：

1. Create an image upload on your website. Simply having <input type="file" accept="image/*">on your page should, on most platforms, allow you to create a button which will open a dialog to select an image from your phone's gallery when clicked. You can find a full example hereor use a library such as Pluploadwhich contains many upload methods, including HTML5 which is what you need.

2. Create a simple server-side upload. This depends on your language and platform, but all you need to do is store the image somewhere and return a link to it in response. If you don't want to store these images on your server, you could forward it to Imgur APIand upload there.

3. Redirect the user to the whatsapp://link that contains the image link.

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

   This is the point where you need to do some testing on different platforms, though. You might not be able to redirect to a whatsapp://link this way (since it seems like a security concern), so you may need to trick it (this is a bad idea, but I'm including it for the sake of completeness; the data-actionpart is from this answer):

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

   In the end, if neither of these work, your best bet is creating a link once the upload is complete for the user to "confirm" sending which actually contains the above whatsapp://link in the hreffield.

1. 在您的网站上创建图片上传。<input type="file" accept="image/*">在大多数平台上，只要在您的页面上放置，您就可以创建一个按钮，单击该按钮将打开一个对话框以从手机图库中选择图像。您可以在此处找到完整示例，或者使用包含许多上传方法的库（例如Plupload），包括您需要的 HTML5。

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

3. 将用户重定向到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();
   

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

There are many factors to test and some that are implementation specific so I had to keep it vague without much code - if you come across anything else when implementing this, please mention it in the comments.

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