在浏览器页面截取容器

Question

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

要求：

这里我只想保存 div 中的内容。所以我在 Div 中显示了一些段落并截取了那个 div 的屏幕截图...

问题 :

但随着内容，它在屏幕截图中显示白色space。

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

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>

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

编辑

当我在table中包含div时，那么多余的白色space将不会显示，但有没有其他方法这样在不使用 table 的情况下，我可以删除那个白色 space 吗？

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

在浏览器页面截取容器

Take Screenshot of container in browser page

javascript

jquery

canvas

snapshot