javascript - 截取浏览器页面中容器的屏幕截图

Question

当用户单击“保存”按钮时，我将截取浏览器页面的屏幕截图，并在this link的帮助下将该屏幕截图保存在服务器中。 ....工作正常。

要求:

这里我只想保存 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>

保存.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 的情况下删除该空格？

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

Answer 1

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

您可以检测您所在的页面，然后从预定的可能尺寸列表中设置尺寸。

这是由于捕获将#target 元素转换为 Canvas 。

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

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