Question

我正在尝试制作div元素截图，但结合了可拖动的jQuery，并且没有运气，我可以截取div并将其保存为png，但如果我在该div上拖动一些元素然后保存截图我得到只有那个div里面的内容和那个div上的可拖动元素？任何想法，这个矿山代码到目前为止

<script type="text/javascript" src="js/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script language="javascript">
$(document).ready(function() {
    $("#myBtn").click(function () {
        html2canvas($("#chartDiv"), {
            onrendered: function (canvas) {
                var imgSrc = canvas.toDataURL();
                $("#myDiv").html('').show();
    var url = "ajax.php";
    $.post(url, {contentVar: imgSrc} ,function(data) {
       $("#myDiv").html(data).show();
    });
            }
        });
    });
});

</script>
 <script>
  $(function() {
    $( ".draggable" ).draggable();
  });
  </script>

我使用AJAX保存图像并以新元素显示

AJAX.PHP

$contentVar = $_POST['contentVar'];

$filteredData=substr($_POST['contentVar'], strpos($_POST['contentVar'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);

echo "<img src="img.png">";

这是HTML：

<div id="chartDiv"><img src="img/assets/logo.png"></div>
<button id="myBtn">Create image</button>
<div id="myDiv"></div>
<img src="img/assets/logo.png" class="draggable" />
<img src="img/assets/logo.png" class="draggable" />

Answer 1

为什么不在截取屏幕截图之前禁用draggalbe元素，然后重新启用它们。这将删除jquery_ui draggable elements和css。

html2canvas截取DIV元素的截图？

1 个答案: