I've been attempting to utilize html2canvas to capture screenshots of specific components within my React application whenever a screenshot is taken, however, regardless of the various methods I've tried, the images produced always turn out blank.
Within the onClick listener for my screenshot button, this is the code that is implemented:
const help = document.querySelector("#help");
html2canvas(help).then((canvas) => {
console.log(help, canvas);
const a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.download = "help.png";
a.click();
});
This is what the element #help contains:
<ul id="help">
<li>Lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
The console.log statement confirms that the correct element is being selected through querySelector. I've experimented with altering properties like allowTaint, backgroundColor, foreignObjectRendering, and useCORS based on suggestions from other sources but none of these adjustments have resolved the issue for me. Even after removing all custom CSS styles, the problem persisted. Enabling logging did not provide any useful information either, leaving me at a loss regarding how to proceed.