Je récupère un img, le transforme en fichier, puis j'essaie de partager ce fichier. J'ai testé le code sur le dernier Chrome sur Android (le seul navigateur qui prend actuellement en charge cette API).

  if (shareimg && navigator.canShare) {
    share = async function() {
      const response = await fetch(shareimg);
      const blob = await response.blob();
      const file = await new File([blob], "image.jpeg");

      navigator.share({
        url: shareurl,
        title: sharetitle,
        text: sharetext,
        files: [file]
      });
    };
  }

J'exécute la fonction en réponse à un utilisateur qui clique sur un bouton (la méthode share () doit être appelée à partir d'un geste d'utilisateur, sinon cela ne fonctionnera pas).

(Je teste ce code à l'aide de Browserstack, qui fournit une console pour les erreurs javascript, car je n'ai pas réussi à lier mon appareil Android à mon mac pour le débogage et cette API ne fonctionne que sur les téléphones mobiles - pas sur Chrome pour le bureau.)

1
o-t-w 8 nov. 2019 à 15:02

1 réponse

Votre code peut être un peu optimisé. Il est actuellement nécessaire de spécifier le type MIME du blob. Vous pouvez vérifier le code ci-dessous dans la pratique ici: https://statuesque-backpack.glitch.me/ .

if ('canShare' in navigator) {
  const share = async function(shareimg, shareurl, sharetitle, sharetext) {
    try {
      const response = await fetch(shareimg);
      const blob = await response.blob();
      const file = new File([blob], 'rick.jpg', {type: blob.type});

      await navigator.share({
        url: shareurl,
        title: sharetitle,
        text: sharetext,
        files: [file]
      });
    } catch (err) {
      console.log(err.name, err.message);
    }
  };

  document.querySelector('button').addEventListener('click', () => {
    share(
      'https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Rick_Astley_Dallas.jpg/267px-Rick_Astley_Dallas.jpg',
      'https://en.wikipedia.org/wiki/Rick_Astley',
      'Rick Astley',
      'Never gonna give you up!'
    );
  });  
}
0
DenverCoder9 8 nov. 2019 à 13:06