how to convert multiple div into image (png/jpeg) using php and javascript?

Question

How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.

Here is the code I tried for -

<?php 
$names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
$i=1;
foreach ($names as $name ) { 
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
    <p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>


<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>

<div id="image">
    <p>Image:</p>
</div>

My Css code --

<style>
    @font-face {
        font-family:roboto;
        src: url("/roboto/Roboto-Medium.ttf")
    }
    .mydivCls {
        background-image: url("1.png");
        width: 325px;
        height: 207px;
    }
    .mydivCls p {
        font-family: roboto;
        padding-top: 100px;
        text-align: center;
    }
</style>

And here is my script --

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
        var i=1;
        $(".mydivCls").each (function(){
            html2canvas([document.getElementById('mydiv'+i)], {
                onrendered: function (canvas) {
                    document.getElementById('canvas').appendChild(canvas);
                    var data = canvas.toDataURL('image/png');

                    var image = new Image();
                    image.src = data;
                    document.getElementById('image').appendChild(image);
                }
            });
            i++;
        });
</script>

I'm getting following error in my console --

TypeError: document.getElementById(...) is null
document.getElementById('canvas'+i).appendChild(canvas);

Answer 1

Here is the solution I found --

<?php
/**
 * This Script is used for converting a particular div to image
 */
?>

and my HTML code --

<?php 
$names = [" ", "Kuldeep Kumar", "Rishabh Gaur", "AMIT RANJAN", "Vinay Agarwal", "MANJEET KUMAR", "Shuchi Singla", "Sumit Chaturvedi"];
$i=1;
foreach ($names as $name ) {
?>
    <div class='mydivCls' id="mydiv<?php echo $i?>">
        <p id="mytext"><?php echo $name ?></p>
    </div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
    <p>Canvas:</p>
</div>

<div id="image">
    <p>Image:</p>
</div>

and changes in script --

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
        var i=1;
        $(".mydivCls").each (function(){
            html2canvas([document.getElementById('mydiv'+i)], {
                onrendered: function (canvas) { 
                    document.getElementById('canvas').appendChild(canvas);
                    var data = canvas.toDataURL('image/png');

                    var image = new Image();
                    image.src = data;
                    document.getElementById('image').appendChild(image);
                }
            });
            i++;
        });
</script>