html2canvas 对 DIV 元素进行截图？答案

【问题标题】：html2canvas take screenshot of DIV element?html2canvas 对 DIV 元素进行截图？
【发布时间】：2013-10-09 06:43:10
【问题描述】：

我正在尝试制作 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" />

【问题讨论】：

老兄，你找到解决办法了吗？

标签： jquery-ui draggable html2canvas

【解决方案1】：

为什么不在截屏之前禁用 Draggalbe 元素，然后重新启用它们。这将删除 jquery_ui 可拖动元素和 css。

【讨论】：