Save every x minutes with html2canvas

Question

I want to make a badge from a div like a game badge, I got html2canvas to save to my server by click a button, how ever I want it so I don't need to press a button every time I want a updated image.

The script i'm using is

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

The save page is:

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

So is there anyway of saving the div to image every x minutes?

score 0 · Answer 1 · 2018-03-06T22:28:02.813

0

You can pass capture function to a setInterval function, which receives intervals in milliseconds as the second argument.

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

setInterval(capture, 2000);

This will call capture function every 2 second.

edited Mar 06 '18 at 22:28

answered Mar 06 '18 at 22:13

So in my code where would I put it so I don't need to do anything? Runs without my input etc. – Max Mar 06 '18 at 22:15
I have edited my answer, so it shows where you can put that. – Mar 06 '18 at 22:28
That works but you have to be on the page, is there anyway of not needing to be on the page so it runs without me? – Max Mar 06 '18 at 22:35
How will you catch $('#img_val') if you're not on the page? I guess no, and that's not the only reason, sorry. – Mar 06 '18 at 22:40
That's why I need a second plan but using html2canvas, got to be away right? I hope... – Max Mar 06 '18 at 22:41

Save every x minutes with html2canvas

1 Answers1