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 に答える