Create and Save Dynamic images into the folder using html2canvas javascript with php and mysql

Question

I am creating dynamic div using PHP for loop (1 to 6 divs), those div content automatically needs to create an image using html2canvas javascript, but for me only the 1st dive creating as a image and its stored in the folder using PHP via Ajax. I want to create and save all the (6 divs content) as image and stored into the folder. How to do this?

<html>
<head>
    <title></title>
    <link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <script src=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
    </script>
    <style>
        .top {
            margin-top: 20px;
        }
        
        h1 {
            color: green;
        }
        
        input {
            background-color: transparent;
            border: 0px solid;
            width: 300;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
        
        <?php
        for($i=1;$i<=6;$i++)
{?>
        
        <div id="createImg" style="border:1px solid;">
            <h1>convert image</h1>
            <h4>save an HTML5 Canvas as an
                        image on a server <?php echo $i ?></h4>
            <input type="text" value=""
    placeholder="Enter wahtaever you want <?php echo $i ?>" class="form-control" />
            <br/>
        </div>
        
        <?php } ?>
        
        
        <button id="imgclicks" type="button"
                                    class="btn btn-primary top">
            Create Image</button>
        <div id="img" style="display:none;">
            <img src="" id="newimg" class="top" />
        </div>
    </div>
    <script>
        $(function() {
            $("#imgclicks").click(function() {
                
               


                html2canvas($("#createImg"), {
                    onrendered: function(canvas) {
                        var imgsrc = canvas.toDataURL("image/png");
                        console.log(imgsrc);
                        $("#newimg").attr('src', imgsrc);
                        $("#img").show();
                        var dataURL = canvas.toDataURL();
                        $.ajax({
                            type: "POST",
                            url: "save_image.php",
                            data: {
                                imgBase64: dataURL
                            }
                        }).done(function(o) {
                            console.log('saved');
                        });
                    }
                });
            });
        });
    </script>
</body>

</html>

after click create image button, only the first div created as a image and its saved into the folder using php via ajax. my ajax action php code below

<?php
define('UPLOAD_DIR', 'uploads/');  
$img = $_POST['imgBase64'];  
$img = str_replace('data:image/png;base64,', '', $img);  
$img = str_replace(' ', '+', $img);  
$data = base64_decode($img);  
$file = UPLOAD_DIR . uniqid() . '.png';  
$success = file_put_contents($file, $data);  
print $success ? $file : 'Unable to save the file.';

?>

Now i want to create all the 6 images and its saved into my uploads folder. how to achieve this?

Your loop creates multiple elements that have the same id. That's not valid in HTML. Id's _must_ be unique within a document since it's for identifying a _specific_ element. That means that if you select elements by id in js, you will only get the first one. If you want to select multiple elements, use a specific class instead. — M. Eriksson, Aug 04 '21 at 12:36
Yes i can add dynamic id like this

convert image

save an HTML5 Canvas as an image on a server

but i want to know how to pass this dynamic id to the jquery selector — Udhayakumar, Aug 04 '21 at 15:25

Create and Save Dynamic images into the folder using html2canvas javascript with php and mysql

convert image

save an HTML5 Canvas as an image on a server

0 Answers0