I'll first describe what we are trying to achieve and then I'll describe the actual problem.
The project:
It's a bingo generator. We want the users to fill in a form. Alongside the form, they'll see a "preview", made with HTML, CSS and JS based on the form content. When they submit the form, it'll also save an image based on that preview. To convert the HTML and CSS into an image, I'm using a JS script called html2canvas. Since it seems impossible to upload a generated image to the form, I'm actually sending it as a base64 string.
The problem:
The script that converts HTML to image is a bit heavy, so I can only run it after the user is done and click the submit button. I can't find a way to run my JS script (that converts the HTML to image and then set a hidden field value to the base64 string) when the user clicks the submit button.
Summarized explanation about how to reproduce the scenario (just in case):
1 - create a front-end submission form
2 - write some JS to show with HTML and CSS the content of the form (the "preview")
3 - use html2canvas to convert the preview to image
4 - submit the image WITH the form content
Thanks in advance.
.
