时间戳

首页 > 解决方案 > 使用带有 php 和 mysql 的 html2canvas javascript 创建动态图像并将其保存到文件夹中

javascript - 使用带有 php 和 mysql 的 html2canvas javascript 创建动态图像并将其保存到文件夹中

问题描述

我正在使用 PHP for 循环（1 到 6 个 div）创建动态 div，这些 div 内容自动需要使用 html2canvas javascript 创建图像，但对我来说，只有第一次潜水创建为图像并将其存储在文件夹中使用 PHP 通过 Ajax . 我想将所有（6 个 div 内容）创建并保存为图像并存储到文件夹中。这个怎么做？

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

单击创建图像按钮后，只有第一个 div 创建为图像，并通过 ajax 使用 php 将其保存到文件夹中。我的ajax动作php代码如下

<?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.';

?>

现在我想创建所有 6 张图像并将其保存到我的上传文件夹中。如何做到这一点？

标签： javascriptphpajaxhtml2canvasdynamic-image-generation

解决方案

推荐阅读