web-dev-qa-db-ja.com

WhatsApp HTML画像共有リンク

私はあなたがとメッセージを共有できることを知っています、これはAndroid and ios now：

<a href="whatsapp://send?text=Hello world this is a message and a link http://www.example.com/image.jpg">Share with whatsapp</a>

しかし、誰かが彼の電話（ギャラリー）から画像を共有するように、私のウェブサイト上のボタンを通して画像を共有したいと思います。とにかくこれは可能ですか？

html5whatsapp
26
Manuel

頭に浮かぶ1つの解決策は、AJAXを介してサーバーに写真をアップロードし、アップロードされた写真へのリンクを返し、質問で説明した方法を使用して写真へのリンクを含むメッセージを送信することです。これはquiteではなく、受信者はリンクのみを受信するため、Whatsappを使用して画像を直接送信することと同じではありませんが、ウェブページを使用してギャラリーから別のアプリケーションに画像を送信すると、深刻な懸念が生じる可能性があります。

大まかに言うと、このプロセスは次のようになります（すべてのプラットフォームまたは少なくともそれらのほとんどで適切に機能するソリューションを見つけるには、テストが必要になることに注意してください）。

  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();

    結局、これらのどちらも機能しない場合、ユーザーがアップロードを完了したら、hrefフィールドに上記のwhatsapp://リンクを実際に含む送信を「確認」するためのリンクを作成するのが最善策です。

テストする要素は多数あり、実装固有のものもあるため、多くのコードなしで曖昧にする必要がありました。これを実装するときに何か他に出くわした場合は、コメントで言及してください。

5
fstanis