How to generate and save an Image from HTML

I am creating an app that, based on some user inputs (a title, a text message and two images), it will generate a complex image. To generate this image, I already have the HTML that must change based on the user inputs. In the HTML itself I have already added a .js script to transform the

I want to Image. What I want to know is:

  1. How can I only run this script when user clicks in a button?
  2. After the user clicks the button, how can I save the image in Bubble Database?

Below you can check the HTML (the div below is just an example) with the script (that in this case is downloading automatically when what I want is to save it to my DB):

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Automatically Generate and Download SVG from HTML using dom-to-image</title>
    <script src=""></script>
    <!-- Your HTML content here -->
    <div id="content">
        <h1>Hello, world!</h1>
        <p>This is some HTML content.</p>

        // Function to generate and download the SVG
        function generateAndDownloadSVG() {
            const content = document.getElementById("content");

            // Use dom-to-image library to capture the content as an SVG
                .then(function (dataUrl) {
                    // Create a new anchor element
                    const downloadLink = document.createElement("a");
                    downloadLink.href = dataUrl;
           = "generated_image.svg"; // Set the filename here

                    // Simulate click on the anchor element to trigger download

                    // Clean up: remove the anchor element from the document

        // Automatically generate and download the SVG when the document is fully loaded
        window.addEventListener("load", generateAndDownloadSVG);