几个重叠图像HTML画布的屏幕截图 [英] Screenshot of several overlaying images HTML canvas

问题描述

您好！



我正在建立一个网站，我让人们覆盖图像，然后使用html2canvas和PHP在我的服务器上保存这个截图。我对他们中的任何一个都不是很有经验。



问题是画布在保存画布内容时仅捕获其中一个重叠图像。关于如何解决这个问题的任何建议？



我尝试过的事情：



我在这里建立了一个页面的测试版本： SKJER？ [ ^ ]（当我覆盖两三张图片时，我也遇到了麻烦，得到错误：请求实体太大。请求的资源/bokbodentest/save.php不允许带有POST请求的请求数据，或者请求中提供的数据量超过容量限制。）我发送了一个发送电子邮件给我的网站主机。



我的代码如下：



Index.php：

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:

<?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：

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

?> 

推荐答案

（'＃target'）。html2canvas（{
onrendered：function（canvas）{
/ /将隐藏字段的值设置为图像数据（base-64字符串）

('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string)

（'＃img_val'）。val（canvas.toDataURL（image / png））;
//手动提交表单
document.getElementById（myForm）。submit（）;
}
}）;
}
< / script>

('#img_val').val(canvas.toDataURL("image/png")); //Submit the form manually document.getElementById("myForm").submit(); } }); } </script>

PHP：

PHP:

<?php
//Get the base-64 string from data

filteredData = substr（

filteredData=substr(

这篇关于几个重叠图像HTML画布的屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！