web-dev-qa-db-fra.com

Comment partager une image générée dynamiquement de réagir avec réacteur-action?

J'ai une application réagissante qui génère des images sur l'extrémité avant en utilisant de manière dynamique tracé.js . Je voudrais ajouter des fonctionnalités de partage d'images. J'essaie d'utiliser réacteur-part pour cela. Les plates-formes sociales nécessitent une URL d'image pour le partage d'images et ne prennent pas en charge les images en codage ou à la fois de base64. Le backend a été mis en œuvre afin qu'il puisse recevoir des images en base64, stocker dans la base de données et renvoyer l'URL à l'image, qui est ensuite utilisée pour le partage avec react-share.

Lorsque l'image est générée de manière dynamique (il modifie chaque fois que l'utilisateur redimensionne le graphique, par exemple), tout doit être effectué lorsque l'utilisateur clique sur l'icône de partage.

Ainsi, une fois que l'utilisateur a cliqué sur l'icône Share, l'image générée sur l'extrémité avant doit être enregistrée à l'arrière.

let imgURI;

  const handleClick = () => {
    Plotly.toImage('chartContainer', {
      format: 'png',
      width: 1000,
      height: 600
    })
      .then(dataUrl => api.post('/image/base64ToPng', { image: dataUrl })
        .then(
          (response) => {
            imgURI = response.data.imgURI;
          },
          failure => console.error(failure)
        ));
  };

une fois la réponse reçue, transmise au composant de partage comme celui-ci

<FacebookShareButton
            url={imgURI}
          >
     <FacebookIcon/>
</FacebookShareButton>

L'échantillon de code n'est pas asynchrone. L'URI de l'image n'est donc pas transmis au composant de partage, le partage de partage ne fonctionne donc pas. J'ai essayé de passer la baisse de la puissance à l'aide de conditionnelle selon que c'est défini ou non et n'a pas été lancé avec une solution. J'ai aussi levé les yeux certainsquestionsdans React-Share Repo qui traitait des URL asynchronisées, mais ne semble pas qu'aucun d'entre eux traite du partage dynamique de l'image sur clic.

J'apprécierais très bien l'indice sur la façon de compléter cette tâche.

javascriptreactjsimageplotly.jsreact-share
4
Poliakoff

Utilisez Navigator.share API si possible.

Ayant dit que vous pouviez écrire un wrapper qui gère le chargement de l'état et désactive l'icône du composant.

Créer un composant de partage ASYNC

//AsyncShareLoader.jsx
const AsyncShareLoader = ({ url, children }) => {
  const loading = !url;
  return (
    <div style={{ filter: `grayscale(${loading ? "100%" : "0%"}` }}>
      {React.Children.map(children, (child) =>
        React.cloneElement(child, {
          disabled: loading,
          url: loading ? "none" : url,
          openShareDialogOnClick: !loading
        })
      )}
    </div>
  );
};

Maintenant, utilisez-le comme une enveloppe pour vos icônes réelles-actions réelles. Quelque chose comme ça

const Share = () => {
  const [url, setUrl] = useState()

  useEffect(() => {
    fetch('/imgUrl').then(getUrlFromRes).then(setUrl)
  }, [])

  return (
    <AsyncShareLoader url={url}>
      <FacebookShareButton>
        <FacebookIcon />
      </FacebookShareButton>
    </AsyncShareLoader>    
  );
}

Extension de cette technique que vous pourriez voler manuellement, cliquez comme Andrew suggéré.

1
ChandraKumar