I'll first describe what we are trying to achieve and then I'll describe the actual problem.
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 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
I think you can create a button field with a label, for example, "Click here to generate image" then listen to clicking the button to execute the JS function to generate the image.
You can also hide the submit button if you want to force the user to click on the button.
I wouldn't like to force the user to do an extra click. They won't even see the image at this point, just the "live preview".
I also thought about hiding the submit button, which might end up being the solution, although I don't like it very much.