I have rendered an image via html2canvas and jquery:
<script>
function capture() {
console.log("function is running");
jQuery('#square').html2canvas({
onrendered: function(canvas) {
var url;
url = canvas.toDataURL("image/png");
//Set hidden field's value to image data (base-64 string)
jQuery('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
//var myImage = canvas.toDataURL("image/png");
window.open(url);
jQuery("#myForm").submit();
console.log(jQuery('#img_val').val());
}
});
}
</script>
The code works all fine, and I see the image via the window.opne.
The issue I have is when I submit my form holding the image value is NOT passed. I know it's set because I see that via console.
My form:
<input type="submit" value="Take Screenshot Of Div" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="/save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
My Save.php
<?php
//save.php code
//Show the image
var_dump($_POST['img_val']);
echo 'Billede:<br />';
echo '<img src="'.$_POST['img_val'].'" />';
//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' . rand(0,10000) . '.png', $unencodedData);
?>
Why is the value of the renderend image not passed via my form - when I know I set it via jQuery ?