使用 html2canvas 每 x 分钟保存一次

Question

我想从一个 div 制作一个徽章，就像一个游戏徽章，我通过点击一个按钮将 html2canvas 保存到我的服务器，我想要它，所以我不需要每次都按下按钮图片更新了。

我使用的脚本是

function capture() {
    $('#box').html2canvas({
        onrendered: function (canvas) {
            $('#img_val').val(canvas.toDataURL("image/png"));
            document.getElementById("myForm").submit();
        }
    });
}

保存页面为：

    <?php
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('img.png', $unencodedData);
?>
<h2>Save the image and show to user</h2>
<table>
    <tr>
        <td>
            <a href="img.png" target="blank">
                Click Here to See The Image Saved to Server</a>
        </td>
        <td align="right">
            <a href="index.php">
                Click Here to Go Back</a>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <br />
            <br />
            <span>
                Here is Client-sided image:
            </span>
            <br />
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
?>

那么有没有办法每隔 x 分钟将 div 保存到图像？

Answer 1

您可以将捕获函数传递给 setInterval 函数，该函数接收以毫秒为单位的间隔作为第二个参数。

function capture() {
  $('#box').html2canvas({
    onrendered: function (canvas) {
        $('#img_val').val(canvas.toDataURL("image/png"));
        document.getElementById("myForm").submit();
    }
  });
}

setInterval(capture, 2000);

这将每 2 秒调用一次捕获函数。