html2canvas DIV元素的截圖？

我想製作div元素截圖，但與可拖動的jQuery相結合，並沒有運氣，我可以截取div的截圖並保存它像PNG，但如果我拖動該div的一些元素，然後保存屏幕截圖，我只得到那個div裏面的內容和可拖動元素在那個div上面是什麼？任何想法，這個礦代碼到目前爲止html2canvas 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" />

來源

2013-10-09 Miomir Dancevic

老兄，你找到了解決辦法嗎？ – Andy

爲什麼不先禁用draggalbe元素截圖，然後重新啓用它們。這將刪除jquery_ui可拖動的元素和CSS。

來源

2014-01-04 17:02:33 mozgras

html2canvas DIV元素的截圖？

回答

相關問題