如何使用 React 将 <div> 动态生成的图像发送到另一个页面

Question

我正在使用 React 开发报告应用程序，我正在使用 Recharts to generate some charts then I need to include them in the final report generated with react-pdf，为此我需要 png/jpg 格式。

为此，我创建了一个函数来生成可以下载或附加到 div 的图表图像，但我真的不知道该怎么做才能发送它到最终报告页面。

我尝试发送 dataUrl 变量，我认为它可以工作，但没有，我得到的是一张空图像。您可以检查捕获图表部分的代码。


    htmlToImage.toPng(node)
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });

目前我想到但仍未实现的唯一解决方案是让用户下载图表图像，然后在报告的最后部分上传它。（如果它很愚蠢并且有效，那它就不是愚蠢..）

这是我第一次在 Whosebug 上提问，所以如果我的问题不是很清楚，我可以重写它！

感谢您的宝贵时间和帮助！

Answer 1

所以我终于找到了解决办法；将 div 转换为数据 URL 并将其保存在变量中，然后将其发送到最后一页。

html2canvas(document.getElementById('my-node'))
      .then(function (canvas) {
         var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg','image/octet-stream');
        setImgSource(base64URL)
       });

我觉得这不是最好的方法，所以我会进行新的更新，以防我找到新的方法！

如何使用 React 将 <div> 动态生成的图像发送到另一个页面

How to send an image generated dynamically of a <div> to another Page with React

reactjs

recharts

react-pdf