2

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

1 回答 1

0

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

于 2014-01-04T17:02:33.017 回答