Question

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

要求：

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

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时，该多余的空格将不会显示，但是还有其他方法可以使我在不使用表的情况下删除该空格吗？

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

Answer 1

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

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

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

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


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

在浏览器页面中获取容器的屏幕截图

1 个答案: