WhatsApp HTML condivisione link per l'immagine

Question

so che è possibile condividere messaggi con e questo sta lavorando su Android e iOS ora:

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

Tuttavia mi piacerebbe condividere un'immagine attraverso un pulsante sul mio sito web come se qualcuno condividerebbe un'immagine dal suo telefono (galleria). È comunque possibile?

Answer 1

Una soluzione che ti viene in mente è caricare una foto sul tuo server tramite AJAX, restituendo il link alla foto caricata e quindi inviando un messaggio con il link alla tua foto utilizzando il metodo che hai descritto nella tua domanda. Questo non è piuttosto lo stesso di inviare un'immagine direttamente usando Whatsapp in quanto il destinatario riceverebbe solo un collegamento, ma dubito che ci sarà mai un modo per inviare un'immagine ad un'altra applicazione dalla tua galleria usando una pagina web poiché ciò solleverebbe alcune serie preoccupazioni.

Approssimativamente, il processo sarebbe come questo (tenere a mente che questo richiederà un po 'di test per ottenere il diritto e trovare una soluzione che funziona bene su tutte le piattaforme, o almeno la maggior parte di essi):

1. Creare un caricamento di immagini sul tuo sito web. Avere semplicemente <input type="file" accept="image/*"> sulla tua pagina dovrebbe, sulla maggior parte delle piattaforme, permetterti di creare un pulsante che aprirà una finestra di dialogo per selezionare un'immagine dalla galleria del tuo telefono quando cliccato. Puoi trovare uno full example here o utilizzare una libreria come Plupload che contiene molti metodi di caricamento, incluso HTML5, che è quello che ti serve.

2. Creare un semplice caricamento sul lato server. Questo dipende dalla lingua e dalla piattaforma, ma tutto ciò che devi fare è archiviare l'immagine da qualche parte e restituire un link ad essa in risposta. Se non si desidera memorizzare queste immagini sul proprio server, è possibile inoltrarle a Imgur API e caricarle lì.

3. Reindirizzare l'utente al collegamento whatsapp:// che contiene il collegamento dell'immagine.

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

   Questo è il punto in cui è necessario eseguire alcuni test su piattaforme diverse, però. Potresti non essere in grado di reindirizzare a un collegamento whatsapp:// in questo modo (poiché sembra un problema di sicurezza), quindi potresti doverlo ingannare (questa è una cattiva idea, ma la sto includendo per completezza; data-action parte è da this answer):

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

   alla fine, se nessuno di questi lavori, la soluzione migliore è la creazione di un collegamento, una volta completato il caricamento per l'utente di "conferma" l'invio che in realtà contiene il sopra whatsapp:// collegamento nel campo href.

Ci sono molti fattori da testare e alcuni che sono specifiche di attuazione così ho dovuto tenerlo vaga senza molto codice - se vi imbattete in qualsiasi altra cosa, del presente, la preghiamo di ricordare nei commenti.