In JavaScript, is there a way to form a data URI for an image without rendering said image?

I am currently using a html2canvas (for tables to render them to a canvas and extract the data URI) and ApexCharts (for graphs to extract the data URI) in order to pass the URIs to a PDF file inline. I also alter the charts and tables depending on data which the user can change. However, I have noticed consistently the following problems:

1. In html2canvas, the SVG will change depending on the width of the page. To me this means that the instructions to build the URI is changing upon rendering

2. In apexcharts, similarly changing the size of the charts that I export to data URI alters the look of them. Additionally, after I render a chart and get the data URI, I try to hide the chart and the URI defaults to null, or when I render the chart offscreen, I also get a null.

Is there a way to get the instructions for building the image without rendering it on the page? I am fairly new to react/js (going on week 3 of using it). Or is there an elegant way to render the image out of sight (either in another unviewed component or in the same component)?

Thanks in advance, your friendly, neighborhood, zonked dev

(note, I am far more familiar with the react syntax, so if there’s a neat JS way I have skated over, feel free to point me in that direction!)

Answer

After getting a response from the apexcharts folks (a resounding no) and hearing from some folks with more experience than I have (senior software dev and a professor at my Masters program) it turns out no, I cannot access as of now a chart or otherwise’s DataURI unless I render it on the visible page. I was advised to do this work on the backend and build the pdf there (was suggested to run a headless browser for this purpose) and then send it to the front end in pdf form.

I’ll update if this is a feature that is created!