您好,我正在尝试使用html2canvas将html div保存到图像中。我几乎尝试了所有的东西,但我无法让它发挥作用。
我不熟悉jquery,ajax等。
这是我的javascript和html:
<script src="/editor/js/jquery.js"></script>
<script src="/editor/js/html2canvas.js"></script>
<script type="text/javascript">
function saveData(dturl){
dturl.replace(/^data:image\/(png|jpg);base64,/, "");
$.post( "/editor/canvas/savelogo.php", {img:dturl}, function(data) {
//$('#recieve').append(data);
});
}
$('.click').click(function(){
var el = $('#fpd').get(0);
html2canvas.Preload(el, {
complete: function(image){
var queue = html2canvas.Parse(el, image, {elements: el}),
$canvas = $(html2canvas.Renderer(queue, {elements: el}));
saveData($canvas[0].toDataURL());
}
});
});
</script>
<button class="click">Save this</button>
PHP代码:
<?php
# we are a PNG image
header('Content-type: image/png');
# we are an attachment (eg download), and we have a name
header('Content-Disposition: attachment; filename="' . $_POST['name'] .'"');
#capture, replace any spaces w/ plusses, and decode
$encoded = $_POST['img'];
$encoded = str_replace(' ', '+', $encoded);
$decoded = base64_decode($encoded);
#write decoded data
echo $decoded;
?>