Partagez des images via les réseaux sociaux avec PWA

Question

Dans ma PWA Nuxt, j'ai une fonction qui convertit le HTML en Canvas à l'aide de ce package. L'image générée est en base 64. Maintenant, je veux pouvoir partager l'image via : Whatsapp, Facebook, Email, Instagram, etc. J'ai trouvé quelques packages, mais aucun d'entre eux ne semble prendre en charge le partage uniquement d'URL de fichiers et de texte.

Voici ma fonction de partage :

shareTicket(index) {
  html2canvas(this.$refs['ticket-' + index][0], {
    backgroundColor: '#efefef',
    useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
  }).then((canvas) => {
    let url = canvas.toDataURL('image/png') // finally produced image url

    if (navigator.share) {
      navigator.share({
        title: 'Title to be shared',
        text: 'Text to be shared',
        url: this.url,
      })
    }
  })

Quand je sors if (navigator.share) 条件时，我的控制台中出现错误，指出 navigator.share ce n'est pas une fonction. J'ai lu quelque part que cela ne fonctionnait qu'avec HTTPS, j'ai donc téléchargé sur mon serveur intermédiaire et je l'ai essayé, mais j'ai toujours eu la même erreur.

Pour être clair, je souhaite pouvoir partager l'image générée elle-même, pas l'URL.

Answer 1

J'ai une variante du code suivant dans la fonction share() de mon application et cela fonctionne bien s'il est exécuté sur le client.

const share = async() => {
  if (!('share' in navigator)) {
    return;
  }
  // `element` is the HTML element you want to share.
  // `backgroundColor` is the desired background color.
  const canvas = await html2canvas(element, {
    backgroundColor,
  });
  canvas.toBlob(async (blob) => {
    // Even if you want to share just one file you need to 
    // send them as an array of files.
    const files = [new File([blob], 'image.png', { type: blob.type })];
    const shareData = {
      text: 'Some text',
      title: 'Some title',
      files,
    };
    if (navigator.canShare(shareData)) {
      try {
        await navigator.share(shareData);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error(err.name, err.message);      
        }
      }
    } else {
      console.warn('Sharing not supported', shareData);            
    }
  });
};

Answer 2

Dites-moi si cette URL fonctionne pour vous : https://nuxt-share-social-media.netlify.app
Si tel est le cas, vous pouvez trouver le référentiel Github ici : https://github.com/ Kissu/so-share-image-bounty

Le code est

sssccc

Inspiré par @denvercoder9 !