Screenshot of several overlaying images HTML canvas

See more:

Javascript

HTML

PHP

Canvas

Hello!

I'm building a site where I'm letting people overlay images and then saving a screenshot of this on my server, using html2canvas and PHP. I'm not very experienced with either of them.

The problem is that the canvas only captures one of the overlaying images when saving the content of the canvas. Any suggestions on how I can go about solving this?

What I have tried:

I've built a test versjon of the page here: SKJER?[^] (I'm also having trouble with it sometimes not working when I overlay two or three images, getting the error: "Request Entity Too Large. The requested resource /bokbodentest/save.php does not allow request data with POST requests, or the amount of data provided in the request exceeds the capacity limit.") I've sent an email to my webhost about this.

My code is as follows:

Index.php:

<div class="left">
  <button class='toggleButton'>Hide / Show</button>
  <button class='toggleButton2'>Hide / Show</button>
  <button class='toggleButton3'>Hide / Show</button>
  
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
  <input type="hidden" name="img_val" id="img_val" value="">
</form>

            <input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />
</div>

<div id="target">
				<div id='toggleBox'><img src="bilde.jpg"></div>
        <div id='toggleBox2'><img src="bilde2.jpg"></div>
        <div id='toggleBox3'><img src="bilde3.jpg"></div>
      
<div>

<script type="text/javascript">
  function capture() {
    $('#target').html2canvas({
      onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
        $('#img_val').val(canvas.toDataURL("image/png"));
                //Submit the form manually
        document.getElementById("myForm").submit();
      }
    });
  }
</script>

PHP:

<?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'].'" />';
?>
        </td>
    </tr>
</table>
<style type="text/css">
body, a, span {
	font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
</style>

JS:

$('.toggleButton').click(function(){
		$('#toggleBox').toggle();
	});

$('.toggleButton2').click(function(){
		$('#toggleBox2').toggle();
	});

$('.toggleButton3').click(function(){
		$('#toggleBox3').toggle();
	});

function capture() {
    $('#target').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}

<pre><? php //save.php code
 
//Show the image
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.png', $unencodedData);

?>