html2canvas take screenshot of DIV element? - jquery-ui

Question

I am trying to make div element screenshot, but combined with draggable jQuery, and have no luck, I can take screenshot of div and save it like png, but if I drag some elements on that div and then save screenshot I get only what is inside that div and draggable elements over that div? Any idea, this mine code so far
<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>
I am using AJAX to save image and present in new element
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">";
And here is the 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

Why not disable the the draggalbe elements before taking the screenshot, then re-enabling them. This will remove the jquery_ui draggable elements and css.