Member 12983962 Ответов: 0

Скриншот нескольких наложенных изображений HTML canvas

- Привет!

Я создаю сайт, где я позволяю людям накладывать изображения, а затем сохраняю скриншот этого на своем сервере, используя html2canvas и PHP. У меня нет большого опыта ни в том, ни в другом.

Проблема заключается в том, что холст захватывает только одно из наложенных изображений при сохранении содержимого холста. Есть какие-нибудь предложения о том, как я могу решить эту проблему?

Что я уже пробовал:

Я построил тестовую версию этой страницы здесь: Сайту skjer?[^] (У меня также возникают проблемы с тем, что он иногда не работает, когда я накладываю два или три изображения, получая ошибку: "Request Entity Too Large. Запрашиваемый ресурс /bokbodentest/save.php не позволяет запрашивать данные с помощью POST-запросов, или объем данных, предоставленных в запросе, превышает лимит емкости".) я отправил электронное письмо на свой веб-хост об этом.

Мой код выглядит следующим образом:

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
//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);

?>

0 Ответов