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?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.