Javascript 在浏览器页面中拍摄容器的屏幕截图

当用户单击“保存”按钮时，我正在拍摄浏览器页面的屏幕截图，并在……的帮助下将该屏幕截图保存到服务器中。。。。很好用

要求：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/html2canvas.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/jquery.plugin.html2canvas.js"></script>

<div id="target"> 
<p class="paragraph">some text
</p>
</div>  

<input class="save" type="submit" value="save" 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>

<style>

.save {
    font-size: 20px;
}

.paragraph {    
    font-size: 25px;
}   

</style>

<script>      

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>

在这里，我只想保存div中的内容。因此，我在div中显示了一些段落&只截取该div的屏幕截图

问题：

但与内容一起，它在屏幕截图中显示了空白

下面是保存在服务器中的屏幕截图：

Html：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/html2canvas.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/jquery.plugin.html2canvas.js"></script>

<div id="target"> 
<p class="paragraph">some text
</p>
</div>  

<input class="save" type="submit" value="save" 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>

<style>

.save {
    font-size: 20px;
}

.paragraph {    
    font-size: 25px;
}   

</style>

<script>      

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>

一些文本

.保存{
字体大小：20px；
}
.第{
字体大小：25px；
}   
函数捕获（）{
$（“#目标”）.html2canvas({
onrendered：函数（画布）{
//将隐藏字段的值设置为图像数据（base-64字符串）
$（'img_val'）.val（canvas.toDataURL（“image/png”）；
//手动提交表单
document.getElementById（“myForm”）.submit（）；
}
});
}

Save.php

<?php

//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('/images/image.png', $unencodedData);
?>

编辑

当我将div包含在表中时，将不会显示额外的空格，但是是否有其他方法可以在不使用table的情况下删除该空格

<table>
   <tr>
      <td>
         <div id="target">
            <p>some text</p>
         </div>
      </td>
   </tr>
</table>

一些文本

您需要在此处设置目标元素的大小。在拍摄图像之前

您可以检测您所在的页面，然后根据预先确定的可能大小列表设置大小

这是因为捕获正在将#目标元素转换为画布

但如果您有多个设置/页面，则添加一个带有某些页面大小写的开关

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

            //Example with pages
            let page = 1; //Page 1? (detect which page you are on then set the value here
            switch(page){
                case 1:
                    // Set Width and Height here.
                    $('#target').css('width', '200px');
                    $('#target').css('height', '200px');
                break;
                case 2:
                    // Set Width and Height here.
                    $('#target').css('width', '450px');
                    $('#target').css('height', '900px');
                break;
                case 3:
                    // Set Width and Height here.
                    $('#target').css('width', '250px');
                    $('#target').css('height', '480px');
                break;
                /* etc etc*/
            }
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}

---

你每天都问这个问题，然后把它删除吗？@Rorymcrossan谢谢你的评论，这和上一个问题完全不同，我没有删除任何问题，这个问题涉及到

保存用户上传的图像

，但这涉及到

拍摄容器的屏幕截图

…JSFIDLE和代码笔有问题，在JSFIDLE上找不到您的捕获功能，您的代码笔没有大量加载html2canvas插件，我按照您的建议设置了大小，但当我拍摄图像时，它仍然显示空白。。。。另外，如果可能，请不要使用开关（第页），而是给我动态解决方案，以便它适合所有高度和宽度……您需要设置#target的宽度和高度，我无法帮助您，因为我不知道您的未来/动态解决方案是什么样子。我在这里不清楚。请关闭问题并加入