如何使用 php 和 javascript 将多个 div 转换为图像（png/jpeg）？

Question

如何将多个动态 div（在运行时创建）转换为图像。在运行时使用 php 数组创建了 50 多个 div。我只想将所有这些 div 分别转换为图像。

这是我尝试过的代码 -

<?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>

我的 Css 代码 --

<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>

这是我的脚本--

<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>

我的控制台出现以下错误 --

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

Answer 1

这是我找到的解决方案——

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

还有我的 HTML 代码 --

<?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>

以及脚本的变化 --

<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>

Answer 2

图像生成代码是正确的，您的 php 部分有问题（所有 div 具有相同的 id）。需要增加 $i 变量：

    <?php $i=1;
    foreach ($names as $name ) { 
    ?>
    <div class='mydivCls' id="mydiv<?php echo $i?>">
        <p id="mytext"><?php echo $name ?></p>
    </div>
    <?php $i++;
   } ?>