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

Question

I am working on a Reporting App with React, I am using Recharts to generate some charts then I need to include them in the final report generated with react-pdf and to do so I need them in png/jpg format.

In order to do so, I have created a function to generate an image of the charts that can be downloaded or appended to a div but I don't really know what to do in order to send it to the final report page.

I tried to send the dataUrl variable I thought it could work but no it's an empty image that I got. You can check the code for capturing the part for the charts.

    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);
      });

The only solution that I got in my mind for now and still haven't done it, is to have the user download the image of the charts then upload it in the final part of the report. (if it's stupid and it works it ain't stupid..)

It's the first time that I ask on stackoverflow so if my problem is not really clear I can rewrite it !

Thank you for your time and help !

Answer 1

So I did finally find a solution ; Transform the div to data URL and save it in a variable then just send it to the final page.

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

I feel that it's not the best way to do it so I will make a new update in case I found out a new way !